html {
box-sizing: border-box;
font-size: 62.5%;
}
html.shiftless-scrollbar:not(.tox-fullscreen) {
scrollbar-gutter: stable;
}
*,
:after,
:before {
box-sizing: inherit;
}
body {
background-color: var(--color-gray-800);
color: var(--color-gray-800);
font-family: var(--globalPrimaryFont);
font-size: 1.4rem;
line-height: 1.43;
margin: 0;
padding: 0;
touch-action: manipulation;
}
hr {
background-color: var(--color-gray-300);
border: none;
height: 0.1rem;
margin-top: 2rem;
}
textarea {
font-family: inherit;
}
.img-responsive {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
.hide {
display: none !important;
}
@font-face {
font-display: swap;
font-family: Montserrat;
font-style: normal;
font-weight: 700;
src: url(/bundles/web/fonts/montserrat-700.2213e098.woff2) format("woff2"),
url(/bundles/web/fonts/montserrat-700.c0b94e18.woff) format("woff");
}
@font-face {
font-display: swap;
font-family: Montserrat;
font-style: normal;
font-weight: 800;
src: url(/bundles/web/fonts/montserrat-800.2d88ac8b.woff2) format("woff2"),
url(/bundles/web/fonts/montserrat-800.5f0120af.woff) format("woff");
}
@font-face {
font-display: block;
font-family: Chess V3;
font-weight: 400;
src: url(/bundles/web/fonts/chessglyph-v3/chessglyph-v3.ff9d64d4.woff2)
format("woff2"),
url(/bundles/web/fonts/chessglyph-v3/chessglyph-v3.632b3ccc.woff)
format("woff");
}
@media print {
.comments-form,
.layout-column-two,
.navigation-footer-component,
.navigation-header-component,
.settings-informative-message,
.settings-payment-account-settings-top,
.social-share-component,
.ui_pagination-component {
display: none !important;
}
.base-container {
overflow: visible;
}
.settings-layout-component {
display: block !important;
}
.settings-layout-component .layout-column-one {
display: none !important;
}
.settings-layout-component .layout-column-two {
display: block !important;
}
}
.icon-font-chess.chess:before {
content: "\0069";
}
.icon-font-chess.chess960:before {
content: "\1F28";
}
.icon-font-chess.threecheck:before {
content: "\00CB";
}
.icon-font-chess.kingofthehill:before {
content: "\012A";
}
.icon-font-chess.losers:before {
content: "\012B";
}
.icon-font-chess.crazyhouse:before {
content: "\010E";
}
.icon-font-chess.bughouse:before {
content: "\011A";
}
.icon-font-chess.solo-chess:before {
content: "\1F06";
}
.icon-font-chess.liveChess960:before {
content: "\00D1";
}
.icon-font-chess.tournament:before {
content: "\004F";
}
.icon-font-chess.live-teammatch:before,
.icon-font-chess.teammatch:before {
content: "\03C4";
}
.icon-font-chess.vs-bot:before {
content: "\1F70";
}
.icon-font-chess.four-ffa:before {
content: "\1F69";
}
.icon-font-chess.variants:before {
content: "\1F6A";
}
.icon-font-chess.horde:before {
content: "\1F7C";
}
.icon-font-chess.chaturanga:before {
content: "\1F7D";
}
.icon-font-chess.classical:before {
content: "\1F8A";
}
.icon-font-chess.classroom:before {
content: "\1F91";
}
.icon-font-chess.endgames:before {
content: "\1F96";
}
.icon-font-chess.doubles-unpartner:before {
content: "\1FA6";
}
.icon-font-chess.nav-horizontal:before {
content: "\0052";
}
.icon-font-chess.nav-vertical:before {
content: "\00E7";
}
.icon-font-chess.nav-expanded:before {
content: "\03E1";
}
.icon-font-chess.nav-collapsed:before {
content: "\03E0";
}
.icon-font-chess.collapse-down:before {
content: "\1F29";
}
.icon-font-chess.nav-pawn:before {
content: "\1F2A";
}
.icon-font-chess.bug:before {
content: "\00F5";
}
.icon-font-chess.hourglass:before {
content: "\03FA";
}
.icon-font-chess.camera:before {
content: "\0048";
}
.icon-font-chess.camera-plus:before {
content: "\03DF";
}
.icon-font-chess.globe:before {
content: "\004D";
}
.icon-font-chess.order:before {
content: "\004F";
}
.icon-font-chess.flag:before {
content: "\0059";
}
.icon-font-chess.calendar:before {
content: "\0061";
}
.icon-font-chess.three-day:before {
content: "\1F90";
}
.icon-font-chess.daily-game:before {
content: "\1F1A";
}
.icon-font-chess.chat:before {
content: "\0063";
}
.icon-font-chess.chat-alt:before {
content: "\007A";
}
.icon-font-chess.chat-x:before {
content: "\2044";
}
.icon-font-chess.quickchat:before {
content: "\1F93";
}
.icon-font-chess.chess-book:before {
content: "\006F";
}
.icon-font-chess.filter:before {
content: "\203A";
}
.icon-font-chess.sort:before {
content: "\1F5D";
}
.icon-font-chess.lock:before {
content: "\0064";
}
.icon-font-chess.inbox:before {
content: "\0065";
}
.icon-font-chess.lightbulb:before {
content: "\0067";
}
.icon-font-chess.nametag:before {
content: "\0068";
}
.icon-font-chess.mail:before {
content: "\0075";
}
.icon-font-chess.mail-alt:before {
content: "\0079";
}
.icon-font-chess.mail-plus:before {
content: "\006B";
}
.icon-font-chess.mail-exclaimation:before {
content: "\03BB";
}
.icon-font-chess.book:before {
content: "\006F";
}
.icon-font-chess.book-alt:before {
content: "\00A4";
}
.icon-font-chess.book-open:before {
content: "\00B4";
}
.icon-font-chess.files:before {
content: "\03C3";
}
.icon-font-chess.popup:before {
content: "\0070";
}
.icon-font-chess.depth:before {
content: "\1F35";
}
.icon-font-chess.bell:before {
content: "\0071";
}
.icon-font-chess.bell-off:before {
content: "\1FB2";
}
.icon-font-chess.menu:before {
content: "\0074";
}
.icon-font-chess.home:before {
content: "\0077";
}
.icon-font-chess.home-alt:before {
content: "\03DB";
}
.icon-font-chess.custom-home:before {
content: "\1F3A";
}
.icon-font-chess.bullet:before {
content: "\1F1D";
}
.icon-font-chess.chess-board-puzzle:before {
content: "\1F15";
}
.icon-font-chess.chess-board-vision:before {
content: "\0111";
}
.icon-font-chess.puzzle-rush:before {
content: "\1EBA";
}
.icon-font-chess.fire:before {
content: "\1F05";
}
.icon-font-chess.fire-alt:before {
content: "\1F25";
}
.icon-font-chess.survival:before {
content: "\1F10";
}
.icon-font-chess.smartphone:before {
content: "\E902";
}
.icon-font-chess.computer:before {
content: "\1F21";
}
.icon-font-chess.computer-search:before {
content: "\03BE";
}
.icon-font-chess.comp-analysis:before {
content: "\1F3B";
}
.icon-font-chess.comp-analysis-done:before {
content: "\1F3C";
}
.icon-font-chess.max-analysis:before {
content: "\1F64";
}
.icon-font-chess.comp-drills:before {
content: "\1F3E";
}
.icon-font-chess.vscomp:before {
content: "\1F4A";
}
.icon-font-chess.tag:before {
content: "\00BD";
}
.icon-font-chess.toolbox:before {
content: "\00BC";
}
.icon-font-chess.cake:before {
content: "\00BE";
}
.icon-font-chess.asterisk:before {
content: "\002A";
}
.icon-font-chess.trash:before {
content: "\2022";
}
.icon-font-chess.download:before {
content: "\0022";
}
.icon-font-chess.upgrade:before {
content: "\2039";
}
.icon-font-chess.pushpin:before {
content: "\00BB";
}
.icon-font-chess.key:before {
content: "\00A2";
}
.icon-font-chess.page:before {
content: "\00A3";
}
.icon-font-chess.page-alt:before {
content: "\20AC";
}
.icon-font-chess.page-pencil:before {
content: "\0078";
}
.icon-font-chess.news:before {
content: "\0045";
}
.icon-font-chess.news-alt:before {
content: "\1F13";
}
.icon-font-chess.equal:before {
content: "\003D";
}
.icon-font-chess.stats:before {
content: "\003B";
}
.icon-font-chess.stats-arrow-up:before {
content: "\010D";
}
.icon-font-chess.stats-x:before {
content: "\00F0";
}
.icon-font-chess.graphs:before {
content: "\03C5";
}
.icon-font-chess.binoculars:before {
content: "\2014";
}
.icon-font-chess.magnifying-glass:before {
content: "\2013";
}
.icon-font-chess.magnifying-glass-done:before {
content: "\1F49";
}
.icon-font-chess.present:before {
content: "\00BE";
}
.icon-font-chess.enter:before {
content: "\1F12";
}
.icon-font-chess.exit:before {
content: "\00D7";
}
.icon-font-chess.draw:before {
content: "\002B";
}
.icon-font-chess.cup:before {
content: "\2021";
}
.icon-font-chess.leaguecup:before {
content: "\1FA5";
}
.icon-font-chess.scales:before {
content: "\0371";
}
.icon-font-chess.paper-pencil:before {
content: "\03A3";
}
.icon-font-chess.todo-list:before {
content: "\010F";
}
.icon-font-chess.trophy-plus:before {
content: "\03A5";
}
.icon-font-chess.trophy-minus:before {
content: "\03BA";
}
.icon-font-chess.trophy-podium:before {
content: "\03B5";
}
.icon-font-chess.events:before {
content: "\1F36";
}
.icon-font-chess.privacy:before {
content: "\03B2";
}
.icon-font-chess.survey:before {
content: "\03C1";
}
.icon-font-chess.arena:before {
content: "\1F39";
}
.icon-font-chess.clubs:before {
content: "\1F9B";
}
.icon-font-chess.club-arena:before {
content: "\1F8C";
}
.icon-font-chess.battle:before {
content: "\1F5F";
}
.icon-font-chess.tracked-content:before {
content: "\00D5";
}
.icon-font-chess.pawn-tracked:before {
content: "\1F23";
}
.icon-font-chess.queen-wreath:before {
content: "\00F1";
}
.icon-font-chess.crosshair:before {
content: "\0111";
}
.icon-font-chess.shield:before {
content: "\014B";
}
.icon-font-chess.chip:before {
content: "\00F6";
}
.icon-font-chess.chip-crossed:before {
content: "\1F07";
}
.icon-font-chess.comp-challenge:before {
content: "\1F37";
}
.icon-font-chess.smiley:before {
content: "\03C2";
}
.icon-font-chess.smileyadd:before {
content: "\1F44";
}
.icon-font-chess.troll:before {
content: "\1F74";
}
.icon-font-chess.eye:before {
content: "\0057";
}
.icon-font-chess.eye-off:before {
content: "\1F40";
}
.icon-font-chess.select:before {
content: "\03AD";
}
.icon-font-chess.store:before {
content: "\1F43";
}
.icon-font-chess.question-mark:before {
content: "\1F0E";
}
.icon-font-chess.inaccuracy:before {
content: "\1F6F";
}
.icon-font-chess.cycle:before {
content: "\1F34";
}
.icon-font-chess.gift:before {
content: "\1F4D";
}
.icon-font-chess.perfect:before {
content: "\1F4C";
}
.icon-font-chess.four-teams:before {
content: "\1F59";
}
.icon-font-chess.four-custom:before {
content: "\1F5B";
}
.icon-font-chess.percentile:before {
content: "\1F2E";
}
.icon-font-chess.carousel:before {
content: "\1F11";
}
.icon-font-chess.edit-time:before {
content: "\03D9";
}
.icon-font-chess.add-time:before {
content: "\1F6C";
}
.icon-font-chess.switches:before {
content: "\1F75";
}
.icon-font-chess.torpedo:before {
content: "\1F71";
}
.icon-font-chess.blindfold:before {
content: "\1F73";
}
.icon-font-chess.camera-on:before {
content: "\1F6D";
}
.icon-font-chess.camera-off:before {
content: "\1F6E";
}
.icon-font-chess.cloud:before {
content: "\1F6B";
}
.icon-font-chess.disconnected:before {
content: "\1F8D";
}
.icon-font-chess.library:before {
content: "\1F45";
}
.icon-font-chess.library-add:before {
content: "\1F57";
}
.icon-font-chess.atomic:before {
content: "\1F7B";
}
.icon-font-chess.bookmark:before {
content: "\1F66";
}
.icon-font-chess.bookmark-add:before {
content: "\1FA0";
}
.icon-font-chess.excellent:before {
content: "\1F67";
}
.icon-font-chess.fork:before {
content: "\1F8E";
}
.icon-font-chess.handshake:before {
content: "\1F88";
}
.icon-font-chess.target:before {
content: "\1F8F";
}
.icon-font-chess.target-off:before {
content: "\1F87";
}
.icon-font-chess.official:before {
content: "\1F89";
}
.icon-font-chess.verified:before {
content: "\1F9D";
}
.icon-font-chess.location:before {
content: "\1F86";
}
.icon-font-chess.practice:before {
content: "\1F95";
}
.icon-font-chess.quality:before {
content: "\1F9A";
}
.icon-font-chess.castling:before {
content: "\1F99";
}
.icon-font-chess.pieces-all:before {
content: "\1F98";
}
.icon-font-chess.phases:before {
content: "\1F97";
}
.icon-font-chess.savedisk:before {
content: "\1F9E";
}
.icon-font-chess.qrcode:before {
content: "\1FA1";
}
.icon-font-chess.magout:before {
content: "\1FA2";
}
.icon-font-chess.randomcolor:before {
content: "\1FA3";
}
.icon-font-chess.duck:before {
content: "\1F9F";
}
.icon-font-chess.undo:before {
content: "\004C";
}
.icon-font-chess.link:before {
content: "\0041";
}
.icon-font-chess.challenge-link:before {
content: "\1F61";
}
.icon-font-chess.x:before {
content: "\0042";
}
.icon-font-chess.reply:before {
content: "\0043";
}
.icon-font-chess.checkmark:before {
content: "\0047";
}
.icon-font-chess.correct:before {
content: "\1F30";
}
.icon-font-chess.incorrect:before {
content: "\1F3F";
}
.icon-font-chess.redo:before {
content: "\1F22";
}
.icon-font-chess.plus:before {
content: "\0056";
}
.icon-font-chess.eval:before {
content: "\1F33";
}
.icon-font-chess.copy:before {
content: "\1F24";
}
.icon-font-chess.list:before {
content: "\0072";
}
.icon-font-chess.embed:before {
content: "\221E";
}
.icon-font-chess.darklight:before {
content: "\1F3D";
}
.icon-font-chess.image-plus:before {
content: "\03B6";
}
.icon-font-chess.follow:before {
content: "\011E";
}
.icon-font-chess.unfollow:before {
content: "\0120";
}
.icon-font-chess.quote:before {
content: "\00D6";
}
.icon-font-chess.web-view:before {
content: "\0126";
}
.icon-font-chess.circle:before {
content: "\0054";
}
.icon-font-chess.circle-dashboard:before {
content: "\004E";
}
.icon-font-chess.circle-x:before {
content: "\0051";
}
.icon-font-chess.circle-3-dots:before {
content: "\038F";
}
.icon-font-chess.circle-gearwheel:before {
content: "\00B7";
}
.icon-font-chess.circle-clock:before {
content: "\0027";
}
.icon-font-chess.circle-clock-alt:before {
content: "\00B0";
}
.icon-font-chess.circle-question:before {
content: "\0028";
}
.icon-font-chess.circle-info:before {
content: "\0029";
}
.icon-font-chess.circle-arrow:before {
content: "\00F7";
}
.icon-font-chess.circle-block:before {
content: "\222B";
}
.icon-font-chess.circle-stop:before {
content: "\0026";
}
.icon-font-chess.circle-danger:before {
content: "\2020";
}
.icon-font-chess.circle-checkmark:before {
content: "\03C7";
}
.icon-font-chess.circle-compass:before {
content: "\0121";
}
.icon-font-chess.donate:before {
content: "\1F4B";
}
.icon-font-chess.more:before {
content: "\1F2B";
}
.icon-font-chess.best:before {
content: "\1F94";
}
.icon-font-chess.time-warning:before {
content: "\1F8B";
}
.icon-font-chess.piechart:before {
content: "\1FB1";
}
.icon-font-chess.square:before {
content: "\1F04";
}
.icon-font-chess.square-reply:before {
content: "\0058";
}
.icon-font-chess.square-pencil:before {
content: "\005A";
}
.icon-font-chess.square-brush:before {
content: "\006C";
}
.icon-font-chess.square-in:before {
content: "\00A1";
}
.icon-font-chess.square-out:before {
content: "\00BF";
}
.icon-font-chess.square-bottom-in:before {
content: "\039E";
}
.icon-font-chess.square-x:before {
content: "\00FC";
}
.icon-font-chess.square-plus:before {
content: "\1F01";
}
.icon-font-chess.square-equal:before {
content: "\1F03";
}
.icon-font-chess.square-checkmark:before {
content: "\03BF";
}
.icon-font-chess.square-four:before {
content: "\03F8";
}
.icon-font-chess.arc-sharp:before {
content: "\1F50";
}
.icon-font-chess.arc-rough:before {
content: "\1F51";
}
.icon-font-chess.arc-throwaway:before {
content: "\1F52";
}
.icon-font-chess.arc-balanced:before {
content: "\1F53";
}
.icon-font-chess.arc-wild:before {
content: "\1F54";
}
.icon-font-chess.arc-sudden:before {
content: "\1F55";
}
.icon-font-chess.arc-smooth:before {
content: "\1F56";
}
.icon-font-chess.wld:before {
content: "\1F63";
}
.icon-font-chess.square-minus:before {
content: "\1F02";
}
.icon-font-chess.thumb-lrg:before {
content: "\1F80";
}
.icon-font-chess.thumb-med:before {
content: "\1F81";
}
.icon-font-chess.thumb-sml:before {
content: "\1F82";
}
.icon-font-chess.thumb-alt:before {
content: "\1F83";
}
.icon-font-chess.thumb-row:before {
content: "\1F84";
}
.icon-font-chess.thumb-left:before {
content: "\1F85";
}
.icon-font-chess.caret-up:before {
content: "\007C";
}
.icon-font-chess.caret-down:before {
content: "\003F";
}
.icon-font-chess.caret-left:before {
content: "\002F";
}
.icon-font-chess.caret-right:before {
content: "\005C";
}
.icon-font-chess.chevron-up:before {
content: "\003E";
}
.icon-font-chess.chevron-bottom:before {
content: "\003C";
}
.icon-font-chess.chevron-left:before {
content: "\002C";
}
.icon-font-chess.chevron-right:before {
content: "\2026";
}
.icon-font-chess.double-chevron-left:before {
content: "\0021";
}
.icon-font-chess.double-chevron-right:before {
content: "\03B1";
}
.icon-font-chess.chevron-previous:before {
content: "\0023";
}
.icon-font-chess.chevron-next:before {
content: "\0040";
}
.icon-font-chess.arrow-return:before {
content: "\005F";
}
.icon-font-chess.arrow-up:before {
content: "\007D";
}
.icon-font-chess.arrow-down:before {
content: "\007B";
}
.icon-font-chess.arrow-left:before {
content: "\005B";
}
.icon-font-chess.arrow-right:before {
content: "\005D";
}
.icon-font-chess.round-arrow-return:before {
content: "\03BC";
}
.icon-font-chess.bold-arrow-right:before {
content: "\0386";
}
.icon-font-chess.arrow-cross:before {
content: "\0110";
}
.icon-font-chess.pulse:before {
content: "\1F60";
}
.icon-font-chess.user:before {
content: "\0062";
}
.icon-font-chess.users:before {
content: "\006D";
}
.icon-font-chess.users-alt:before {
content: "\006E";
}
.icon-font-chess.user-info:before {
content: "\0076";
}
.icon-font-chess.user-question:before {
content: "\002D";
}
.icon-font-chess.user-search:before {
content: "\0024";
}
.icon-font-chess.user-search-alt:before {
content: "\014a";
}
.icon-font-chess.user-feed:before {
content: "\0025";
}
.icon-font-chess.user-block:before {
content: "\00A6";
}
.icon-font-chess.user-plus:before {
content: "\00B6";
}
.icon-font-chess.users-plus:before {
content: "\00FF";
}
.icon-font-chess.user-x:before {
content: "\00A7";
}
.icon-font-chess.user-chain:before {
content: "\0159";
}
.icon-font-chess.user-broken-chain:before {
content: "\0158";
}
.icon-font-chess.user-shield:before {
content: "\03DA";
}
.icon-font-chess.user-shield-plus:before {
content: "\0373";
}
.icon-font-chess.profile-alt:before {
content: "\1F9C";
}
.icon-font-chess.chess-board:before {
content: "\0069";
}
.dark-mode .icon-font-chess.chess-board:not(.light-mode):before,
.icon-font-chess.chess-board.dark-mode:before {
content: "\2019";
}
.icon-font-chess.chess-board-search:before {
content: "\0394";
}
.icon-font-chess.chess-board-search-alt:before {
content: "\03A9";
}
.icon-font-chess.question:before {
content: "\00A9";
}
.icon-font-chess.chess-board-plus:before {
content: "\02C6";
}
.icon-font-chess.lessons:before {
content: "\1F20";
}
.icon-font-chess.chess-board-circle:before {
content: "\00AB";
}
.icon-font-chess.chess-board-gear:before {
content: "\03F7";
}
.icon-font-chess.chess-crown:before {
content: "\03FB";
}
.icon-font-chess.chess-crown-alt:before {
content: "\1F26";
}
.icon-font-chess.crown-learning:before {
content: "\1F32";
}
.icon-font-chess.chess-pawn:before {
content: "\1F19";
}
.icon-font-chess.chess-pawn-left-half-rook:before {
content: "\0112";
}
.icon-font-chess.chess-pawn-right-half-rook:before {
content: "\0113";
}
.icon-font-chess.chess-pawn-rook:before {
content: "\0073";
}
.icon-font-chess.chess-pawn-square:before {
content: "\03B7";
}
.icon-font-chess.chess-move:before {
content: "\1F18";
}
.icon-font-chess.chess-move-alt:before {
content: "\006A";
}
.icon-font-chess.chess-board-folder:before {
content: "\0398";
}
.icon-font-chess.chess-board-arrow-down:before {
content: "\03CC";
}
.icon-font-chess.chess-board-arrow-up:before {
content: "\03CF";
}
.icon-font-chess.chess-board-arrow-right:before {
content: "\03CE";
}
.icon-font-chess.chess-board-arrow-left:before {
content: "\03CD";
}
.icon-font-chess.chess-salad:before {
content: "\1F0A";
}
.icon-font-chess.play-new:before {
content: "\1F2C";
}
.icon-font-chess.play-alt:before {
content: "\1F2D";
}
.icon-font-chess.lesson:before {
content: "\1F14";
}
.icon-font-chess.no-castling:before {
content: "\1F78";
}
.icon-font-chess.fog-of-war:before {
content: "\1F79";
}
.icon-font-chess.sideways-pawns:before {
content: "\1F77";
}
.icon-font-chess.capture-anything:before {
content: "\1F76";
}
.icon-font-chess.board-arrow:before {
content: "\1F62";
}
.icon-font-chess.checkbox:before {
content: "\03A8";
}
.icon-font-chess.checkbox-plus:before {
content: "\03A6";
}
.icon-font-chess.printer:before {
content: "\00E5";
}
.icon-font-chess.play:before {
content: "\004A";
}
.icon-font-chess.pause:before {
content: "\004B";
}
.icon-font-chess.sound-off:before {
content: "\0050";
}
.icon-font-chess.sound-on:before {
content: "\0055";
}
.icon-font-chess.repeat:before {
content: "\0066";
}
.icon-font-chess.shuffle:before {
content: "\0049";
}
.icon-font-chess.resize:before {
content: "\03C0";
}
.icon-font-chess.rss:before {
content: "\1F31";
}
.icon-font-chess.favorites:before {
content: "\03AE";
}
.icon-font-chess.facebook:before {
content: "\0053";
}
.icon-font-chess.twitter:before {
content: "\0046";
}
.icon-font-chess.linkedin:before {
content: "\00C5";
}
.icon-font-chess.tumblr:before {
content: "\00EB";
}
.icon-font-chess.mix:before {
content: "\00DF";
}
.icon-font-chess.reddit:before {
content: "\00B1";
}
.icon-font-chess.google:before {
content: "\1F08";
}
.icon-font-chess.instagram:before {
content: "\1F00";
}
.icon-font-chess.wikipedia:before {
content: "\1F38";
}
.icon-font-chess.youtube:before {
content: "\0060";
}
.icon-font-chess.share:before {
content: "\00A5";
}
.icon-font-chess.twitch:before {
content: "\0393";
}
.icon-font-chess.discord:before {
content: "\1F48";
}
.icon-font-chess.fide:before {
content: "\1F41";
}
.icon-font-chess.android:before {
content: "\00FE";
}
.icon-font-chess.apple:before {
content: "\25CA";
}
.icon-font-chess.win-phone:before {
content: "\03A0";
}
.icon-font-chess.thumbs-down:before {
content: "\2265";
}
.icon-font-chess.thumbs-up:before {
content: "\2264";
}
.icon-font-chess.card:before {
content: "\03DC";
}
.icon-font-chess.paypal:before {
content: "\0377";
}
.icon-font-chess.heart:before {
content: "\1F2F";
}
.icon-font-chess.vk:before {
content: "\1F72";
}
.icon-font-chess.tiktok:before {
content: "\1FB0";
}
.icon-font-chess.chessable:before {
content: "\1FA8";
}
.icon-font-chess.chessable-rook:before {
content: "\1FA7";
}
.icon-font-chess.x-twitter:before {
content: "\E90D";
}
.icon-font-chess.membership-diamond:before {
content: "\0370";
}
.icon-font-chess.membership-platinum:before {
content: "\0376";
}
.icon-font-chess.membership-mod:before,
.icon-font-chess.membership-staff:before {
content: "\0372";
}
.icon-font-chess.membership-gold:before {
content: "\03AE";
}
.icon-font-chess.circle-hollow:before {
content: "\03BD";
}
.icon-font-chess.binoculars-crossed:before {
content: "\00DE";
}
.icon-font-chess.border-resize:before {
content: "\03AC";
}
.icon-font-chess.maximize:before {
content: "\03DD";
}
.icon-font-chess.minimize:before {
content: "\03D8";
}
.icon-font-chess.live:before {
content: "\1F1B";
}
.icon-font-chess.live960:before {
content: "\00D1";
}
.icon-font-chess.livematch:before {
content: "\1F65";
}
.icon-font-chess.live-bullet:before {
content: "\1F1D";
}
.icon-font-chess.live-standard:before {
content: "\1F1C";
}
.icon-font-chess.signal:before {
content: "\03AF";
}
.icon-font-chess.proleague:before {
content: "\014B";
}
.icon-font-chess.streamer:before {
content: "\1F23";
}
.icon-font-chess.bishop-white:before {
content: "\00C4";
}
.icon-font-chess.bishop-black:before {
content: "\0102";
}
.icon-font-chess.knight-white:before {
content: "\0116";
}
.icon-font-chess.knight-black:before {
content: "\00C7";
}
.icon-font-chess.rook-white:before {
content: "\013B";
}
.icon-font-chess.rook-black:before {
content: "\013D";
}
.icon-font-chess.king-white:before {
content: "\0104";
}
.icon-font-chess.king-black:before {
content: "\0100";
}
.icon-font-chess.queen-white:before {
content: "\0136";
}
.icon-font-chess.queen-black:before {
content: "\012E";
}
.icon-font-chess.pawn-white:before {
content: "\0122";
}
.icon-font-chess.pawn-black:before {
content: "\0118";
}
.icon-font-chess.shared-analysis:before {
content: "\1F68";
}
.icon-font-chess.boardexpand:before {
content: "\1FA4";
}
.dark-mode .icon-font-chess.bishop-white:before {
content: "\0102";
}
.dark-mode .icon-font-chess.bishop-black:before {
content: "\00C4";
}
.dark-mode .icon-font-chess.knight-white:before {
content: "\00C7";
}
.dark-mode .icon-font-chess.knight-black:before {
content: "\0116";
}
.dark-mode .icon-font-chess.rook-white:before {
content: "\013D";
}
.dark-mode .icon-font-chess.rook-black:before {
content: "\013B";
}
.dark-mode .icon-font-chess.king-white:before {
content: "\0100";
}
.dark-mode .icon-font-chess.king-black:before {
content: "\0104";
}
.dark-mode .icon-font-chess.queen-white:before {
content: "\012E";
}
.dark-mode .icon-font-chess.queen-black:before {
content: "\0136";
}
.dark-mode .icon-font-chess.pawn-white:before {
content: "\0118";
}
.dark-mode .icon-font-chess.pawn-black:before {
content: "\0122";
}
.icon-font-chess.bishop-stroke:before {
content: "\e901";
}
.icon-font-chess.bishop-fill:before {
content: "\e900";
}
.icon-font-chess.knight-stroke:before {
content: "\e906";
}
.icon-font-chess.knight-fill:before {
content: "\e905";
}
.icon-font-chess.rook-stroke:before {
content: "\e90c";
}
.icon-font-chess.rook-fill:before {
content: "\e90b";
}
.icon-font-chess.king-stroke:before {
content: "\e904";
}
.icon-font-chess.king-fill:before {
content: "\e903";
}
.icon-font-chess.queen-stroke:before {
content: "\e90a";
}
.icon-font-chess.queen-fill:before {
content: "\e909";
}
.icon-font-chess.pawn-stroke:before {
content: "\e908";
}
.icon-font-chess.pawn-fill:before {
content: "\e907";
}
.icon-font-chess.zero:before {
content: "\0030";
}
.icon-font-chess.one:before {
content: "\0031";
}
.icon-font-chess.two:before {
content: "\0032";
}
.icon-font-chess.three:before {
content: "\0033";
}
.icon-font-chess.four:before {
content: "\0034";
}
.icon-font-chess.five:before {
content: "\0035";
}
.icon-font-chess.six:before {
content: "\0036";
}
.icon-font-chess.seven:before {
content: "\0037";
}
.icon-font-chess.eight:before {
content: "\0038";
}
.icon-font-chess.nine:before {
content: "\0039";
}
.icon-font-chess.colon:before {
content: "\003A";
}
.icon-font-chess.period:before {
content: "\002E";
}
.icon-font-chess.matetag:before {
content: "\1F92";
}
html[dir="rtl"] .icon-font-chess.upgrade:before {
content: "\203A";
}
html[dir="rtl"] .icon-font-chess.filter:before {
content: "\2039";
}
html[dir="rtl"] .icon-font-chess.nav-expanded:before {
content: "\03E0";
}
html[dir="rtl"] .icon-font-chess.nav-collapsed:before {
content: "\03E1";
}
html[dir="rtl"] .icon-font-chess.arrow-up:before {
content: "\007B";
}
html[dir="rtl"] .icon-font-chess.arrow-down:before {
content: "\007D";
}
html[dir="rtl"] .icon-font-chess.chevron-up:before {
content: "\003C";
}
html[dir="rtl"] .icon-font-chess.chevron-bottom:before {
content: "\003E";
}
html[dir="rtl"] .icon-font-chess.thumbs-down:before {
content: "\2264";
}
html[dir="rtl"] .icon-font-chess.thumbs-up:before {
content: "\2265";
}
html[dir="rtl"] .icon-font-chess.chevron-left:before {
content: "\2026";
}
html[dir="rtl"] .icon-font-chess.chevron-right:before {
content: "\002C";
}
html[dir="rtl"] .icon-font-chess.circle-question:before {
content: "\0029";
}
html[dir="rtl"] .icon-font-chess.circle-info:before {
content: "\0028";
}
html[dir="rtl"] .icon-font-chess.caret-left:before {
content: "\005C";
}
html[dir="rtl"] .icon-font-chess.caret-right:before {
content: "\002F";
}
html[dir="rtl"] .icon-font-chess.double-chevron-left:before {
content: "\03B1";
}
html[dir="rtl"] .icon-font-chess.double-chevron-right:before {
content: "\0021";
}
html[dir="rtl"] .icon-font-chess.chess-board-circle:before {
content: "\00BB";
}
html[dir="rtl"] .icon-font-chess.pushpin:before {
content: "\00AB";
}
.icon-font-chess.daily:before {
content: "\1F1A";
}
.icon-font-chess.circle-timer:before,
.icon-font-chess.rapid:before {
content: "\1F1B";
}
.icon-font-chess.standard:before {
content: "\0069";
}
.icon-font-chess.blitz:before,
.icon-font-chess.lightning:before {
content: "\1F1C";
}
.icon-font-chess.crossed-swords:before {
content: "\03C4";
}
.icon-font-chess {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: Chess V3;
font-weight: 400;
line-height: 1;
text-align: center;
}
.icon-colored {
color: var(--color-icon-bolder);
}
.icon-colored.battle {
color: var(--color-icon-puzzlebattle);
}
.icon-colored.membership-diamond {
color: var(--color-icon-premium);
}
.icon-colored.blitz,
.icon-colored.live-standard {
color: var(--color-icon-blitz);
}
.icon-colored.bughouse {
color: var(--color-icon-bughouse);
}
.icon-colored.bullet {
color: var(--color-icon-bullet);
}
.icon-colored.chess-board-puzzle {
color: var(--color-icon-puzzles);
}
.icon-colored.puzzle-rush {
color: var(--color-icon-puzzlerush);
}
.icon-colored.chess960 {
color: var(--color-icon-daily960);
}
.icon-colored.crazyhouse {
color: var(--color-icon-crazyhouse);
}
.icon-colored.daily,
.icon-colored.daily-game {
color: var(--color-icon-daily);
}
.icon-colored.book-alt {
color: var(--color-classification-book);
}
.icon-colored.kingofthehill {
color: var(--color-icon-kinghill);
}
.icon-colored.lessons {
color: var(--color-icon-lessons);
}
.icon-colored.live960 {
color: var(--color-icon-live960);
}
.icon-colored.live,
.icon-colored.rapid {
color: var(--color-icon-rapid);
}
.icon-colored.threecheck {
color: var(--color-icon-3check);
}
.icon-colored.checkbox {
color: var(--color-icon-votechess);
}
.icon-colored.livematch {
color: var(--color-icon-livematch);
}
.icon-colored.order {
color: var(--color-icon-tournaments);
}
.icon-colored.teammatch {
color: var(--color-icon-match);
}
.icon-colored.lightbulb {
color: var(--color-icon-insights);
}
.icon-colored.stats:before {
-webkit-text-fill-color: transparent;
background: linear-gradient(
90deg,
var(--color-blue-200) 0,
var(--color-blue-200) 34%,
var(--color-green-300) 34%,
var(--color-green-300) 65%,
var(--color-red-300) 65%,
var(--color-red-300) 100%
);
-webkit-background-clip: text;
}
.flair-link {
display: inline-flex;
}
.flair-link:not([href]) span {
cursor: default;
}
body.safe-mode .avatar-component,
body.safe-mode .notification-toaster-avatar,
body.safe-mode .post-view-meta-avatar img,
body.safe-mode .suggested-users-avatar img,
body.safe-mode .toaster .avatar,
body.safe-mode .user-avatar-image {
background: url(/bundles/web/images/user-image.007dad08.svg) 0 0 no-repeat;
box-sizing: border-box;
overflow: hidden;
}
body.safe-mode .avatar-component[width="20"],
body.safe-mode .notification-toaster-avatar[width="20"],
body.safe-mode .post-view-meta-avatar img[width="20"],
body.safe-mode .suggested-users-avatar img[width="20"],
body.safe-mode .toaster .avatar[width="20"],
body.safe-mode .user-avatar-image[width="20"] {
padding-left: 20px;
}
body.safe-mode .avatar-component[width="30"],
body.safe-mode .notification-toaster-avatar[width="30"],
body.safe-mode .post-view-meta-avatar img[width="30"],
body.safe-mode .suggested-users-avatar img[width="30"],
body.safe-mode .toaster .avatar[width="30"],
body.safe-mode .user-avatar-image[width="30"] {
padding-left: 30px;
}
body.safe-mode .avatar-component[width="40"],
body.safe-mode .notification-toaster-avatar[width="40"],
body.safe-mode .post-view-meta-avatar img[width="40"],
body.safe-mode .suggested-users-avatar img[width="40"],
body.safe-mode .toaster .avatar[width="40"],
body.safe-mode .user-avatar-image[width="40"] {
padding-left: 40px;
}
body.safe-mode .avatar-component[width="50"],
body.safe-mode .notification-toaster-avatar[width="50"],
body.safe-mode .post-view-meta-avatar img[width="50"],
body.safe-mode .suggested-users-avatar img[width="50"],
body.safe-mode .toaster .avatar[width="50"],
body.safe-mode .user-avatar-image[width="50"] {
padding-left: 50px;
}
body.safe-mode .avatar-component[width="60"],
body.safe-mode .notification-toaster-avatar[width="60"],
body.safe-mode .post-view-meta-avatar img[width="60"],
body.safe-mode .suggested-users-avatar img[width="60"],
body.safe-mode .toaster .avatar[width="60"],
body.safe-mode .user-avatar-image[width="60"] {
padding-left: 60px;
}
body.safe-mode .avatar-component[width="70"],
body.safe-mode .notification-toaster-avatar[width="70"],
body.safe-mode .post-view-meta-avatar img[width="70"],
body.safe-mode .suggested-users-avatar img[width="70"],
body.safe-mode .toaster .avatar[width="70"],
body.safe-mode .user-avatar-image[width="70"] {
padding-left: 70px;
}
body.safe-mode .avatar-component[width="80"],
body.safe-mode .notification-toaster-avatar[width="80"],
body.safe-mode .post-view-meta-avatar img[width="80"],
body.safe-mode .suggested-users-avatar img[width="80"],
body.safe-mode .toaster .avatar[width="80"],
body.safe-mode .user-avatar-image[width="80"] {
padding-left: 80px;
}
body.safe-mode .games-grid-avatar .user-avatar-image {
padding-left: 42px;
}
body.safe-mode .post-note-container-post-section .user-avatar-image,
body.safe-mode .suggested-users-avatar img {
padding-left: 50px;
}
body.safe-mode .user-avatar-image.incoming-challenges-avatar {
padding-left: 30px;
}
body.safe-mode .user-popover-component .user-avatar-image {
padding-left: 50px;
}
body.safe-mode.theatre-mode .avatar-component {
padding-left: 80px;
}
.ui_outside-close-component {
background-color: transparent;
border: none;
cursor: pointer;
height: 3rem;
opacity: 0.85;
padding: 0;
position: absolute;
right: var(--positionRight, 1rem);
top: var(--positionTop, 1rem);
width: 3rem;
}
.ui_outside-close-component:hover {
opacity: 1;
transition: opacity 0.3s;
}
.ui_outside-close-icon {
color: var(--iconColor, #8b8987);
font-size: 2.8rem;
}
@media (min-width: 790px) {
.ui_outside-close-component {
--positionRight: -3.8rem;
--positionTop: -0.4rem;
}
.ui_outside-close-icon {
--iconColor: #fff;
}
}
.ui_modal-component {
align-items: center;
display: flex;
height: 100vh;
height: 100dvh;
justify-content: center;
left: 0;
overflow: auto;
position: fixed;
top: 0;
transition: opacity 0.3s ease;
width: 100vw;
z-index: 9999;
}
.ui_modal-rounded-sm {
--modalBorderRadius: 0.5rem;
}
.ui_modal-rounded-lg {
--modalBorderRadius: 1rem;
}
.ui_modal-rounded-lg .ui_modal-header,
.ui_modal-rounded-sm .ui_modal-header {
border-radius: var(--modalBorderRadius) var(--modalBorderRadius) 0 0;
}
.ui_modal-rounded-lg .ui_modal-footer,
.ui_modal-rounded-sm .ui_modal-footer {
border-radius: 0 0 var(--modalBorderRadius) var(--modalBorderRadius);
}
.ui_modal-body {
background-color: var(--modalBg, var(--color-bg-opaque));
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
margin: auto;
max-width: calc(100% - 1.5rem);
position: relative;
}
.ui_modal-body.ui_modal-rounded-lg,
.ui_modal-body.ui_modal-rounded-sm {
border-radius: var(--modalBorderRadius);
}
.ui_modal-body.ui_modal-light-grey {
--modalBg: var(--color-gray-75);
color-scheme: light;
}
.ui_modal-body.ui_modal-light {
--modalBg: #fff;
color-scheme: light;
}
.ui_modal-body.ui_modal-dark {
--modalBg: var(--color-gray-900);
color-scheme: dark;
}
.ui_modal-backdrop {
background-color: var(--backdropBg, rgba(0, 0, 0, 0.65));
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.ui_modal-bg-transparent {
--backdropBg: transparent;
}
.ui_modal-enter,
.ui_modal-leave {
opacity: 0;
}
.ui_modal-xs {
width: 35rem;
}
.ui_modal-sm {
width: 40rem;
}
.ui_modal-md {
width: 46rem;
}
.ui_modal-lg {
width: 50rem;
}
.ui_modal-xl {
width: 60rem;
}
.ui_pagination-item-component {
--paginationColor: #666463;
--paginationBgColor: #e7e6e4;
--paginationBgHover: #dbd9d7;
--paginationColorMuted: #fff;
--paginationBgColorMuted: #8b8987;
align-items: center;
background-color: var(--paginationBgColor);
border: 0;
border-radius: 0.3rem;
color: var(--paginationColor);
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
display: inline-grid;
font-size: 1.2rem;
font-weight: 600;
grid-auto-flow: column;
height: 2.4rem;
max-width: 100%;
min-width: 2.4rem;
overflow: hidden;
padding: 0 0.7rem;
position: relative;
text-align: center;
}
.dark-mode .ui_pagination-item-component {
--paginationColor: hsla(0, 0%, 100%, 0.72);
--paginationBgColor: hsla(0, 0%, 100%, 0.08);
--paginationBgHover: hsla(0, 0%, 100%, 0.16);
--paginationColorMuted: #272522;
--paginationBgColorMuted: hsla(0, 0%, 100%, 0.4);
}
@media (hover: hover) {
.ui_pagination-item-component:not([disabled]):hover {
background-color: var(--paginationBgHover);
}
}
.ui_pagination-item-component.ui_pagination-item-disabled,
.ui_pagination-item-component:disabled {
background-color: var(--paginationBgColorMuted);
color: var(--paginationColorMuted);
cursor: not-allowed;
opacity: 0.4;
}
.ui_pagination-item-component.ui_pagination-item-disabled {
pointer-events: none;
}
.ui_pagination-item-component.ui_pagination-item-active {
background-color: var(--paginationBgColorMuted);
color: var(--paginationColorMuted);
pointer-events: none;
}
.ui_pagination-item-icon {
font-size: 1.2rem;
}
.ui_pagination-spread-component {
color: var(--pageSpread, #8b8987);
display: inline-block;
font-size: 1.6rem;
height: 2.5rem;
min-width: 2.5rem;
padding: 0 0.7rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dark-mode .ui_pagination-spread-component {
--pageSpread: hsla(0, 0%, 100%, 0.5);
}
.ui_pagination-component {
--displayButton: none;
display: flex;
justify-content: space-between;
}
@media (min-width: 40em) {
.ui_pagination-component {
--displayButton: flex;
}
}
.ui_pagination-top {
display: var(--displayButton);
}
.ui_pagination-navigation {
display: flex;
margin-left: auto;
}
.ui_pagination-navigation > a,
.ui_pagination-navigation > button,
.ui_pagination-navigation > div {
margin-left: 0.3rem;
}
.ui_v5-button-component {
--secondaryBorderColor: transparent;
--fontSize: 1.5rem;
--iconSize: 2.8rem;
--iconMargin: 0.5rem;
--disabledOpacity: 0.9;
--boxShadow: inset 0 -0.4rem 2.4rem transparent,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 var(--borderBottomLine);
--boxShadowHover: inset 0 -0.4rem 2.4rem var(--innerBoxShadow),
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0
var(--borderBottomLineHover);
}
.ui_v5-button-component.ui_v5-button-primary {
--bgColor: var(--color-green-300);
--bgHoverColor: #a3d160;
--secondaryBorderColor: rgba(93, 153, 72, 0.2);
--borderBottomLine: var(--color-green-400);
--borderBottomLineHover: var(--color-green-300);
--innerBoxShadow: rgba(69, 117, 60, 0.25);
}
.dark-mode .ui_v5-button-component.ui_v5-button-primary {
--borderBottomLine: var(--color-green-500);
--borderBottomLineHover: var(--color-green-400);
--innerBoxShadow: rgba(69, 117, 60, 0.5);
}
.ui_v5-button-component.ui_v5-button-danger {
--bgColor: var(--color-red-400);
--bgHoverColor: var(--color-red-300);
--secondaryBorderColor: rgba(224, 40, 40, 0.2);
--borderBottomLine: var(--color-red-500);
--borderBottomLineHover: var(--color-red-400);
--innerBoxShadow: rgba(224, 40, 40, 0.5);
}
.ui_v5-button-component.ui_v5-button-secondary {
--bgColor: var(--color-blue-300);
--bgHoverColor: var(--color-blue-200);
--secondaryBorderColor: rgba(0, 105, 171, 0.2);
--borderBottomLine: var(--color-blue-400);
--borderBottomLineHover: var(--color-blue-300);
--innerBoxShadow: rgba(0, 140, 209, 0.5);
}
.dark-mode .ui_v5-button-component.ui_v5-button-secondary {
--borderBottomLine: var(--color-blue-500);
--borderBottomLineHover: var(--color-blue-400);
--innerBoxShadow: rgba(11, 84, 140, 0.5);
}
.ui_v5-button-component.ui_v5-button-tertiary {
--bgColor: #e58f2a;
--bgHoverColor: #f1ab22;
--secondaryBorderColor: rgba(229, 143, 42, 0.2);
}
.ui_v5-button-component.ui_v5-button-basic {
--bgColor: #dbd9d7;
--bgHoverColor: #e7e6e4;
--textColor: #666463;
--textHoverColor: #504f4f;
--textShadowColor: rgba(0, 0, 0, 0.05);
}
.dark-mode .ui_v5-button-component.ui_v5-button-basic {
--bgColor: hsla(0, 0%, 100%, 0.08);
--bgHoverColor: hsla(0, 0%, 100%, 0.16);
--textColor: hsla(0, 0%, 100%, 0.72);
--textHoverColor: #fff;
}
.ui_v5-button-component.ui_v5-button-basic-light {
--bgColor: #dbd9d7;
--bgHoverColor: #e7e6e4;
--textColor: #666463;
--textHoverColor: #504f4f;
--textShadowColor: rgba(0, 0, 0, 0.05);
}
.ui_v5-button-component.ui_v5-button-basic-dark {
--bgColor: hsla(0, 0%, 100%, 0.08);
--bgHoverColor: hsla(0, 0%, 100%, 0.16);
--textColor: hsla(0, 0%, 100%, 0.72);
--textHoverColor: #fff;
--textShadowColor: rgba(0, 0, 0, 0.05);
}
.ui_v5-button-component.ui_v5-button-large {
--borderRadius: 1rem;
--borderHeight: 0.5rem;
--buttonHeight: 6rem;
--buttonPaddings: 0.5rem 2.8rem 1rem;
--fontSize: 2.2rem;
--textShadowColor: rgba(0, 0, 0, 0.3);
--boxShadow: 0 0 0.8rem transparent, 0 0 1.6rem transparent,
inset 0 -0.8rem 2.4rem transparent,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 var(--borderBottomLine);
--boxShadowHover: 0 0 0.8rem var(--secondaryBorderColor),
0 0 1.6rem var(--secondaryBorderColor),
inset 0 -0.8rem 2.4rem var(--innerBoxShadow),
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0
var(--borderBottomLineHover);
font-family: var(--globalSecondaryFont);
font-weight: 800;
line-height: 1.1;
}
.ui_v5-button-component.ui_v5-button-small {
--buttonHeight: 4rem;
--buttonPaddings: 0.5rem 1.8rem;
--iconSize: 2.4rem;
}
.ui_v5-button-component.ui_v5-button-x-small {
--buttonHeight: 3.2rem;
--buttonPaddings: 0.4rem 1.8rem;
--fontSize: 1.3rem;
--iconSize: 2rem;
}
.ui_v5-button-component.ui_v5-button-extra-padding {
--buttonPaddings: 0.5rem 4.8rem;
}
.ui_v5-button-component.ui_v5-button-extra-padding.ui_v5-button-x-small {
--buttonPaddings: 0.5rem 3rem;
}
.ui_v5-button-component.ui_v5-button-min-width {
min-width: 13rem;
}
.ui_v5-button-component {
align-items: center;
background-color: var(--bgColor);
border: 0;
border-radius: var(--borderRadius, 0.5rem);
box-shadow: var(
--boxShadow,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 rgba(0, 0, 0, 0.2)
);
color: var(--textColor, #fff);
display: inline-flex;
font-size: var(--fontSize, 1.5rem);
font-weight: 600;
justify-content: center;
max-width: 100%;
overflow: hidden;
padding: var(--buttonPaddings, 0.5rem 2rem);
position: relative;
text-align: center;
text-shadow: 0 0.1rem 0 var(--textShadowColor, rgba(0, 0, 0, 0.2)),
0 0.3rem 1.6rem rgba(0, 0, 0, 0.05);
transition-duration: 0.1s;
transition-property: box-shadow, background-color, color;
transition-timing-function: ease-out;
}
@media (hover: hover) {
.ui_v5-button-component:not([disabled]):hover {
background-color: var(--bgHoverColor);
box-shadow: var(
--boxShadowHover,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 rgba(0, 0, 0, 0.25)
);
color: var(--textHoverColor, var(--textHoverColor, #fff));
}
}
.ui_v5-button-component:not(.ui_v5-button-full) {
height: var(--buttonHeight, 4.8rem);
white-space: nowrap;
}
.ui_v5-button-component:not(.ui_v5-button-full) > span:not(.ui_v5-button-icon) {
overflow: hidden;
text-overflow: ellipsis;
}
.ui_v5-button-component.ui_v5-button-disabled,
.ui_v5-button-component:disabled {
cursor: not-allowed;
filter: grayscale(0.4);
opacity: var(--disabledOpacity, 0.9);
}
.ui_v5-button-component.ui_v5-button-disabled {
pointer-events: none;
}
.ui_v5-button-component.ui_v5-button-active,
.ui_v5-button-component:not([disabled]):active {
opacity: 0.9 !important;
}
.ui_v5-button-component .ui_v5-button-icon {
font-size: var(--iconSize);
}
.ui_v5-button-component .ui_v5-button-icon:first-of-type {
margin: 0 var(--iconMargin) 0 -0.5rem;
}
.ui_v5-button-component .ui_v5-button-icon:last-of-type {
margin: 0 -0.5rem 0 var(--iconMargin);
}
.ui_v5-button-component .ui_v5-button-icon:only-child {
margin-left: 0 !important;
margin-right: 0 !important;
}
.ui_v5-button-component.ui_v5-button-full {
min-height: var(--buttonHeight, 4.8rem);
width: 100%;
word-break: break-word;
}
.ui_v5-input-component {
-moz-appearance: none;
-webkit-appearance: none;
color: var(--textColor);
font-family: var(--globalPrimaryFont);
font-size: var(--textSize, 1.6rem);
width: 100%;
}
.ui_v5-input-component:focus:not(:disabled),
.ui_v5-input-component:hover:not(:disabled) {
border-color: var(--borderFocus);
}
.ui_v5-input-component::-moz-placeholder {
color: var(--secondaryTextColor);
opacity: 1;
}
.ui_v5-input-component:-ms-input-placeholder {
color: var(--secondaryTextColor);
opacity: 1;
}
.ui_v5-input-component::-ms-input-placeholder {
color: var(--secondaryTextColor);
opacity: 1;
}
.ui_v5-input-component::placeholder {
color: var(--secondaryTextColor);
opacity: 1;
}
.ui_v5-input-component:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.ui_v5-input-component:-moz-read-only {
cursor: default;
}
.ui_v5-input-component:read-only {
cursor: default;
}
.ui_v5-input-component:invalid {
box-shadow: none;
}
.ui_v5-input-component[type="search"]::-webkit-search-cancel-button,
.ui_v5-input-component[type="search"]::-webkit-search-decoration,
.ui_v5-input-component[type="search"]::-webkit-search-results-button,
.ui_v5-input-component[type="search"]::-webkit-search-results-decoration {
display: none;
}
@media (min-width: 40em) {
.ui_v5-input-component {
--textSize: 1.4rem;
}
}
.ui_v5-input-component.ui_v5-input-light,
.ui_v5-input-component:not(.ui_v5-input-dark) {
--borderColor: #dbd9d7;
--borderFocus: #bdbcb8;
--bgColor: #fff;
--textColor: #322e2b;
--secondaryTextColor: #8b8987;
}
.dark-mode .ui_v5-input-component:not(.ui_v5-input-light),
.ui_v5-input-component.ui_v5-input-dark {
--borderColor: hsla(0, 0%, 100%, 0.1);
--borderFocus: hsla(0, 0%, 100%, 0.3);
--bgColor: hsla(0, 0%, 100%, 0.1);
--textColor: hsla(0, 0%, 100%, 0.72);
--secondaryTextColor: hsla(0, 0%, 100%, 0.5);
}
.dark-mode
.ui_v5-input-component:not(
.ui_v5-input-light
)::-webkit-contacts-auto-fill-button,
.ui_v5-input-component.ui_v5-input-dark::-webkit-contacts-auto-fill-button {
background-color: hsla(0, 0%, 100%, 0.8);
color: hsla(0, 0%, 100%, 0.8);
}
.ui_v5-input-component.ui_v5-input-error {
--borderColor: var(--color-border-danger) !important;
--borderFocus: var(--color-border-danger) !important;
}
.ui_v5-input-component:-webkit-autofill {
transition: background-color 5000s;
}
.ui_v5-input-component:-webkit-autofill.ui_v5-input-light,
.ui_v5-input-component:-webkit-autofill:not(.ui_v5-input-dark) {
-webkit-text-fill-color: #464341;
-webkit-box-shadow: inset 0 0 0 1000px #fff;
caret-color: var(--color-gray-800);
}
.dark-mode .ui_v5-input-component:-webkit-autofill:not(.ui_v5-input-light),
.ui_v5-input-component:-webkit-autofill.ui_v5-input-dark {
-webkit-text-fill-color: var(--color-transparent-white-65);
background: -webkit-linear-gradient(
top,
hsla(0, 0%, 100%, 0),
rgba(0, 174, 255, 0.04) 50%,
hsla(0, 0%, 100%, 0) 51%,
rgba(0, 174, 255, 0.03)
);
-webkit-box-shadow: inset 0 0 0 1000px transparent;
caret-color: var(--color-transparent-white-65);
}
.dark-mode
.ui_v5-input-component:-webkit-autofill:not(.ui_v5-input-light):focus,
.dark-mode
.ui_v5-input-component:-webkit-autofill:not(.ui_v5-input-light):hover,
.ui_v5-input-component:-webkit-autofill.ui_v5-input-dark:focus,
.ui_v5-input-component:-webkit-autofill.ui_v5-input-dark:hover {
border-color: var(--borderFocus);
}
.ui_v5-input-component {
background-color: var(--bgColor);
border: 0.1rem solid var(--borderColor);
border-radius: 0.3rem;
height: var(--inputHeight, 3.2rem);
line-height: 1;
padding: var(--inputPadding, 0.4rem 0.8rem);
position: relative;
}
.ui_v5-input-large {
--inputHeight: 4rem;
--inputPadding: 0.8rem 1rem;
}
@media (min-width: 40em) {
.ui_v5-input-large {
--textSize: 1.5rem;
}
}
.ui_v5-input-x-large {
--inputHeight: 4.8rem;
--inputPadding: 0.8rem 1rem;
}
@media (min-width: 40em) {
.ui_v5-input-x-large {
--textSize: 1.6rem;
}
}
.ui_v5-input-group-component {
align-items: center;
display: flex;
position: relative;
}
.ui_v5-input-group-component.ui_v5-input-group-light,
.ui_v5-input-group-component:not(.ui_v5-input-group-dark) {
--inputIconColor: #8b8987;
--inputIconColorHover: #666564;
}
.dark-mode .ui_v5-input-group-component:not(.ui_v5-input-group-light),
.ui_v5-input-group-component.ui_v5-input-group-dark {
--inputIconColor: hsla(0, 0%, 100%, 0.5);
--inputIconColorHover: hsla(0, 0%, 100%, 0.72);
}
.ui_v5-input-group-icon {
bottom: 0;
color: var(--inputIconColor);
font-size: 2rem;
height: 100%;
position: absolute;
top: 0;
width: 3.5rem;
}
.ui_v5-input-group-icon:before {
display: grid;
height: 100%;
place-content: center;
}
.ui_v5-input-group-icon.ui_v5-input-group-left {
border-radius: 0.3rem 0 0 0.3rem;
left: 0;
}
.ui_v5-input-group-icon.ui_v5-input-group-right {
border-radius: 0 0.3rem 0.3rem 0;
right: 0;
}
.ui_v5-input-group-space-left {
padding-left: 3.5rem;
}
.ui_v5-input-group-space-right {
padding-right: 3.5rem;
}
.ui_v5-input-group-button {
background-color: transparent;
border: 0;
border-radius: 0 0.3rem 0.3rem 0;
bottom: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 3.5rem;
}
.ui_v5-input-group-button .ui_v5-input-group-icon {
right: 0;
}
.ui_v5-input-group-button:hover .ui_v5-input-group-icon {
color: var(--inputIconColorHover);
}
.ui_v5-select-component.ui_v5-select-light,
.ui_v5-select-component:not(.ui_v5-select-dark) {
--borderColor: #dbd9d7;
--borderFocus: #bdbcb8;
--bgColor: #fff;
--textColor: #322e2b;
--arrowColor: #a7a6a2;
}
.dark-mode .ui_v5-select-component:not(.ui_v5-select-light),
.ui_v5-select-component.ui_v5-select-dark {
--borderColor: hsla(0, 0%, 100%, 0.1);
--borderFocus: hsla(0, 0%, 100%, 0.3);
--bgColor: hsla(0, 0%, 100%, 0.1);
--textColor: hsla(0, 0%, 100%, 0.72);
--arrowColor: hsla(0, 0%, 100%, 0.5);
--optionBgColor: #fff;
--optionTextColor: #322e2b;
}
.ui_v5-select-component.ui_v5-select-error {
--borderColor: var(--color-border-danger) !important;
--borderFocus: var(--color-border-danger) !important;
}
.ui_v5-select-component {
--arrowPosition: 1rem;
--selectSize: 3.2rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bgColor);
border: 0.1rem solid var(--borderColor);
border-radius: 0.3rem;
color: var(--textColor);
font-family: var(--globalPrimaryFont);
font-size: 1.4rem;
line-height: 1.2;
padding: 0.4rem calc(var(--arrowPosition) + 2rem) 0.4rem 0.8rem;
position: relative;
width: 100%;
}
.ui_v5-select-component::-ms-expand {
display: none;
}
.ui_v5-select-component:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.ui_v5-select-component[multiple] {
padding: 0 !important;
}
.ui_v5-select-component[multiple] option {
padding: 0.4rem 1rem;
}
.ui_v5-select-component:not([multiple]) {
background-image: linear-gradient(
45deg,
transparent 49.8%,
var(--arrowColor) 0
),
linear-gradient(135deg, var(--arrowColor) 49.8%, transparent 0);
background-position: calc(100% - var(--arrowPosition) - 0.5rem) 50%,
calc(100% - var(--arrowPosition)) 50%;
background-repeat: no-repeat;
background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
height: var(--selectSize);
}
.ui_v5-select-component:not([multiple]) option {
background-color: var(--optionBgColor);
color: var(--optionTextColor);
}
.ui_v5-select-component:not([multiple]) optgroup {
color: var(--optionTextColor);
}
.ui_v5-select-component:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.ui_v5-select-component:focus:not(:disabled),
.ui_v5-select-component:hover:not(:disabled) {
border-color: var(--borderFocus);
color: var(--textColor);
}
.ui_v5-select-component.ui_v5-select-large {
--arrowPosition: 1.5rem;
--selectSize: 4rem;
font-size: 1.5rem;
padding: 0.8rem calc(var(--arrowPosition) + 2rem) 0.8rem 1rem;
}
.ui_v5-switch-component {
flex-shrink: 0;
font-size: 1rem;
height: 2.6rem;
padding: 0.2rem;
width: 4.6rem;
}
.ui_v5-switch-checkbox {
clip: rect(0 0 0 0);
height: 0.1rem;
overflow: hidden;
position: absolute;
width: 0.1rem;
}
.ui_v5-switch-checkbox:disabled + .ui_v5-switch-label {
cursor: not-allowed;
opacity: 0.5;
}
.ui_v5-switch-checkbox:focus-visible + label {
box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.6),
0 0 0 0.3rem hsla(0, 0%, 100%, 0.3);
}
.ui_v5-switch-checkbox:not(.ui_v5-switch-readonly):checked
+ .ui_v5-switch-label {
background-color: var(--color-green-400);
}
.ui_v5-switch-checkbox:not(.ui_v5-switch-readonly):checked
+ .ui_v5-switch-label
.ui_v5-switch-button {
margin-left: 1.9rem;
}
.ui_v5-switch-label {
background-color: hsla(0, 0%, 46%, 0.4);
border: 0.1rem solid hsla(0, 0%, 100%, 0.2);
border-radius: 1.1rem;
cursor: pointer;
display: block;
height: 100%;
}
.ui_v5-switch-button {
background-color: #e8e7e6;
border: 0.1rem solid #dad7d5;
border-radius: 50%;
box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1);
height: 2.4rem;
margin: -0.2rem;
width: 2.4rem;
}
.ui_v5-switch-button,
.ui_v5-switch-label {
transition: all 0.3s ease;
}
.ui_v5-switch-group {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
.ui_v5-textarea-component.ui_v5-textarea-light,
.ui_v5-textarea-component:not(.ui_v5-textarea-dark) {
--borderColor: #dbd9d7;
--borderFocus: #bdbcb8;
--bgColor: #fff;
--textColor: #322e2b;
--secondaryTextColor: #8b8987;
}
.dark-mode .ui_v5-textarea-component:not(.ui_v5-textarea-light),
.ui_v5-textarea-component.ui_v5-textarea-dark {
--borderColor: hsla(0, 0%, 100%, 0.1);
--borderFocus: hsla(0, 0%, 100%, 0.3);
--bgColor: hsla(0, 0%, 100%, 0.1);
--textColor: hsla(0, 0%, 100%, 0.72);
--secondaryTextColor: hsla(0, 0%, 100%, 0.5);
}
.ui_v5-textarea-component.ui_v5-textarea-error {
--borderColor: var(--color-border-danger) !important;
--borderFocus: var(--color-border-danger) !important;
}
.ui_v5-textarea-component {
-moz-appearance: none;
-webkit-appearance: none;
background-color: var(--bgColor);
border: 0.1rem solid var(--borderColor);
border-radius: 0.3rem;
color: var(--textColor);
font-family: var(--globalPrimaryFont);
font-size: var(--textSize, 1.6rem);
line-height: 1.25;
min-height: 3.2rem;
padding: 0.5rem 0.8rem;
resize: vertical;
width: 100%;
}
@media (min-width: 40em) {
.ui_v5-textarea-component {
--textSize: 1.4rem;
}
}
.ui_v5-textarea-component:focus:not(:disabled),
.ui_v5-textarea-component:hover:not(:disabled) {
border-color: var(--borderFocus);
}
.ui_v5-textarea-component::-moz-placeholder {
color: var(--secondaryTextColor);
}
.ui_v5-textarea-component:-ms-input-placeholder {
color: var(--secondaryTextColor);
}
.ui_v5-textarea-component::-ms-input-placeholder {
color: var(--secondaryTextColor);
}
.ui_v5-textarea-component::placeholder {
color: var(--secondaryTextColor);
}
.ui_v5-textarea-component:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.ui_v5-textarea-component:invalid {
box-shadow: none;
}
.ui_v5-textarea-component.ui_v5-textarea-autosize {
max-height: 16rem;
resize: none;
}
.ui_v5-textarea-small {
height: 4.8rem;
}
.ui_v5-textarea-large {
height: 10rem;
}
.ui_v5-textarea-x-large {
height: 20rem;
}
.cc-button-component {
--buttonBoxShadow: inset 0 -0.4rem 2.4rem transparent,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 var(--borderBottomLine);
--buttonBoxShadowHover: inset 0 -0.4rem 2.4rem var(--innerBoxShadow),
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0
var(--borderBottomLineHover);
align-items: center;
background-color: var(--bgColor);
border: 0;
border-radius: var(--borderRadius, 0.5rem);
box-shadow: var(
--buttonBoxShadow,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 rgba(0, 0, 0, 0.15)
);
color: var(--textColor, #fff);
column-gap: var(--columnGap, 0.6rem);
display: inline-grid;
font-size: var(--fontSize, 1.4rem);
font-weight: var(--fontWeight, 600);
grid-auto-flow: column;
justify-content: center;
line-height: 1.1428;
max-width: 100%;
min-height: var(--buttonHeight, 4rem);
overflow: hidden;
padding: var(--buttonPaddings, 0.4rem 1.6rem);
text-align: center;
text-shadow: 0 0.1rem 0 var(--buttonTextShadow, rgba(0, 0, 0, 0.2)),
0 0.3rem 1.6rem rgba(0, 0, 0, 0.05);
touch-action: manipulation;
transition-duration: 0.1s;
transition-property: box-shadow, background-color, color;
transition-timing-function: ease-out;
word-break: break-word;
}
@media (hover: hover) {
.cc-button-component:not([disabled]):hover {
background-color: var(--bgColorHover);
box-shadow: var(
--buttonBoxShadowHover,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 rgba(0, 0, 0, 0.15)
);
color: var(--textColorHover, var(--textColor, #fff));
}
}
.cc-button-component:not([disabled]):active {
opacity: 0.9 !important;
}
.cc-button-component.cc-button-disabled,
.cc-button-component:disabled {
cursor: not-allowed;
filter: grayscale(0.4);
opacity: 0.9;
pointer-events: none;
}
.cc-button-component .cc-button-icon:only-child {
--iconSize: var(--iconSizeLarge);
}
.cc-button-primary {
--bgColor: var(--color-green-300);
--bgColorHover: #a3d160;
--borderBottomLine: var(--color-green-400);
--borderBottomLineHover: var(--color-green-300);
--innerBoxShadow: rgba(69, 117, 60, 0.25);
--outlineBoxShadow: rgba(93, 153, 72, 0.2);
}
.dark-mode .cc-button-primary {
--borderBottomLine: var(--color-green-500);
--borderBottomLineHover: var(--color-green-400);
--innerBoxShadow: rgba(69, 117, 60, 0.5);
}
.cc-button-secondary {
--bgColor: #f1f1f1;
--bgColorHover: #e7e6e5;
--textColor: #666564;
--textColorHover: #4b4847;
--buttonTextShadow: rgba(0, 0, 0, 0.05);
}
.dark-mode .cc-button-secondary {
--bgColor: hsla(0, 0%, 100%, 0.08);
--bgColorHover: hsla(0, 0%, 100%, 0.16);
--textColor: hsla(0, 0%, 100%, 0.72);
--textColorHover: #fff;
}
.cc-button-ghost {
--bgColor: transparent;
--bgColorHover: transparent;
--textColor: var(--color-text-link);
--buttonBoxShadow: none;
--buttonBoxShadowHover: none;
--buttonTextShadow: none;
}
.cc-button-ghost:hover {
color: var(--color-text-link-hovered);
}
.cc-button-monetization {
--bgColor: var(--color-blue-300);
--bgColorHover: var(--color-blue-200);
--borderBottomLine: var(--color-blue-400);
--borderBottomLineHover: var(--color-blue-300);
--innerBoxShadow: rgba(0, 140, 209, 0.5);
--outlineBoxShadow: rgba(0, 105, 171, 0.2);
}
.dark-mode .cc-button-monetization {
--borderBottomLine: var(--color-blue-500);
--borderBottomLineHover: var(--color-blue-400);
--innerBoxShadow: rgba(11, 84, 140, 0.5);
}
.cc-button-danger {
--bgColor: var(--color-red-400);
--bgColorHover: var(--color-red-300);
--borderBottomLine: var(--color-red-500);
--borderBottomLineHover: var(--color-red-400);
--innerBoxShadow: rgba(224, 40, 40, 0.5);
--outlineBoxShadow: rgba(224, 40, 40, 0.2);
}
.cc-button-xx-large {
--borderRadius: 1rem;
--borderHeight: 0.4rem;
--buttonBoxShadow: 0 0 0.8rem transparent, 0 0 1.6rem transparent,
inset 0 -0.8rem 2.4rem transparent,
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0 var(--borderBottomLine);
--buttonBoxShadowHover: 0 0 0.8rem var(--outlineBoxShadow),
0 0 1.6rem var(--outlineBoxShadow),
inset 0 -0.8rem 2.4rem var(--innerBoxShadow),
inset 0 calc(var(--borderHeight, 0.1rem) * -1) 0 0
var(--borderBottomLineHover);
--buttonHeight: 6.4rem;
--buttonPaddings: 0 2.4rem var(--borderHeight);
--columnGap: 0.8rem;
--fontSize: 2.4rem;
--fontWeight: 800;
--iconSize: 2.8rem;
--iconSizeLarge: 3.2rem;
font-family: var(--globalSecondaryFont);
}
.cc-button-x-large {
--buttonHeight: 5.6rem;
--buttonPaddings: 0.4rem 2rem;
--columnGap: 0.8rem;
--fontSize: 1.8rem;
--iconSize: 2.4rem;
--iconSizeLarge: 2.8rem;
}
.cc-button-large {
--buttonHeight: 4.8rem;
--buttonPaddings: 0.4rem 2rem;
--columnGap: 0.8rem;
--fontSize: 1.6rem;
--iconSize: 2.4rem;
--iconSizeLarge: 2.8rem;
}
.cc-button-small {
--borderRadius: 0.3rem;
--buttonHeight: 3.2rem;
--buttonPaddings: 0.2rem 1.6rem;
--iconSize: 1.6rem;
--iconSizeLarge: 2rem;
}
.cc-button-x-small {
--borderRadius: 0.3rem;
--buttonHeight: 2.4rem;
--buttonPaddings: 0.2rem 1.2rem;
--columnGap: 0.4rem;
--fontSize: 1.2rem;
--fontWeight: 500;
--iconSize: 1.4rem;
--iconSizeLarge: 1.6rem;
}
.cc-button-full {
width: 100%;
}
.cc-button-min-width {
min-width: 13rem;
}
.cc-button-icon {
font-size: var(--iconSize, 2rem);
text-shadow: none;
}
.cc-button-one-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cc-checkbox-component {
align-items: flex-start;
display: inline-flex;
position: relative;
}
.cc-checkbox-input {
appearance: none;
border: solid 0.1rem var(--globalColorThemeLow);
border-radius: 0.3rem;
cursor: pointer;
display: block;
flex-shrink: 0;
height: 1.4rem;
margin: 0.3rem 0 0.2rem 0;
outline: 0;
outline-offset: 0.1rem;
position: relative;
width: 1.4rem;
}
.cc-checkbox-input:checked {
background-color: var(--globalColorThemeLow);
border-color: transparent;
display: grid;
place-items: center;
}
.cc-checkbox-input:checked:hover:not(:disabled) {
background-color: var(--globalColorThemeMid);
}
.cc-checkbox-input:checked:after {
border: solid 0.2rem var(--globalBackgroundOpaque);
border-right: 0;
border-top: 0;
content: "";
height: 0.5rem;
margin-top: -0.2rem;
position: absolute;
transform: rotate(-45deg);
width: 0.9rem;
}
.cc-checkbox-input:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.cc-checkbox-input:disabled + .cc-checkbox-label {
cursor: not-allowed;
opacity: 0.6;
}
.cc-checkbox-label {
color: var(--globalColorThemeMid);
cursor: pointer;
font-size: 1.4rem;
line-height: 1.1428;
min-height: 2rem;
padding: 0.2rem 0 0.2rem 0.8rem;
}
.keyboard-navigation-in-use .cc-checkbox-input:focus {
outline: 0.1rem auto -webkit-focus-ring-color;
}
.cc-input-component {
--inputHeight: 4rem;
-moz-appearance: none;
-webkit-appearance: none;
background-color: var(--bgColor, #fff);
border: 0.1rem solid var(--borderColor, #dbd9d7);
border-radius: 0.3rem;
color: var(--textColor, #312e2b);
font-size: var(--textSize, 1.6rem);
height: var(--inputHeight);
line-height: 1;
padding: var(--inputPadding, 0.4rem 0.8rem);
position: relative;
width: 100%;
}
.dark-mode .cc-input-component {
--borderColor: hsla(0, 0%, 100%, 0.1);
--borderFocus: hsla(0, 0%, 100%, 0.3);
--bgColor: hsla(0, 0%, 100%, 0.1);
--textColor: hsla(0, 0%, 100%, 0.72);
--secondaryTextColor: hsla(0, 0%, 100%, 0.5);
}
.dark-mode .cc-input-component::-webkit-contacts-auto-fill-button {
background-color: hsla(0, 0%, 100%, 0.8);
color: hsla(0, 0%, 100%, 0.8);
}
.cc-input-component:focus:not(:disabled),
.cc-input-component:hover:not(:disabled) {
border-color: var(--borderFocus, #bdbcb8);
}
.cc-input-component:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.cc-input-component::placeholder {
color: var(--secondaryTextColor, var(--color-gray-500));
opacity: 1;
}
.cc-input-component:read-only {
cursor: default;
}
.cc-input-component:invalid {
box-shadow: none;
}
.cc-input-component[type="search"]::-webkit-search-cancel-button,
.cc-input-component[type="search"]::-webkit-search-decoration,
.cc-input-component[type="search"]::-webkit-search-results-button,
.cc-input-component[type="search"]::-webkit-search-results-decoration {
display: none;
}
.cc-input-component.cc-input-error {
--borderColor: var(--color-border-danger) !important;
--borderFocus: var(--color-border-danger) !important;
}
.cc-input-component:-webkit-autofill {
-webkit-text-fill-color: #464341;
-webkit-box-shadow: inset 0 0 0 100rem #fff;
caret-color: #312e2b;
transition: background-color 50000s ease-in-out 0s;
}
.dark-mode .cc-input-component:-webkit-autofill {
-webkit-text-fill-color: var(--color-transparent-white-65);
-webkit-box-shadow: inset 0 0 0 100rem transparent;
caret-color: var(--color-transparent-white-65);
}
.dark-mode .cc-input-component:-webkit-autofill:focus,
.dark-mode .cc-input-component:-webkit-autofill:hover {
border-color: var(--borderFocus);
}
.cc-input-small {
--inputHeight: 3.2rem;
--inputPadding: 0.8rem 1rem;
}
@media (min-width: 40em) {
.cc-input-small {
--textSize: 1.4rem;
}
}
.cc-input-large {
--inputHeight: 4.8rem;
--inputPadding: 0.8rem 1rem;
--textSize: 1.6rem;
}
.cc-input-x-large {
--inputHeight: 5.6rem;
--inputPadding: 0.8rem 1rem;
--textSize: 1.8rem;
}
.cc-input-group-component {
--inputIconSize: 2rem;
--inputIconColor: var(--globalColorThemeLow);
align-items: center;
display: flex;
position: relative;
}
.cc-input-group-post,
.cc-input-group-pre {
aspect-ratio: 1;
bottom: 0;
display: grid;
height: 100%;
place-content: center;
position: absolute;
top: 0;
}
.cc-input-group-pre {
left: 0;
}
.cc-input-group-post {
right: 0;
}
.cc-input-group-icon {
color: var(--inputIconColor);
font-size: var(--inputIconSize);
}
.cc-input-group-icon.cc-input-group-success {
--inputIconColor: var(--color-icon-success);
}
.cc-input-group-icon.cc-input-group-error {
--inputIconColor: var(--color-icon-danger);
}
.cc-input-group-space-left {
padding-left: var(--inputHeight);
}
.cc-input-group-space-right {
padding-right: var(--inputHeight);
}
.cc-input-group-small {
--inputIconSize: 2rem;
}
.cc-input-group-large {
--inputIconSize: 2.4rem;
}
.cc-input-group-x-large {
--inputIconSize: 2.8rem;
}
button.cc-input-group-post {
background-color: transparent;
border: 0;
border-radius: 0 0.3rem 0.3rem 0;
padding: 0;
}
button.cc-input-group-post:active {
opacity: 0.8;
}
button.cc-input-group-post:hover .cc-input-group-icon {
--inputIconColor: var(--globalColorThemeMid);
}
.cc-input-group-loader {
animation: cc-input-group-spin 1.2s linear infinite;
border: 0.2rem solid var(--globalColorThemeLower);
border-radius: 50%;
border-top: 0.2rem solid var(--globalColorThemeHigh);
height: var(--inputIconSize);
width: var(--inputIconSize);
}
@keyframes cc-input-group-spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
body.modal-overflow-hidden {
overflow: hidden;
}
.cc-modal-component {
align-items: center;
display: flex;
height: 100vh;
height: 100dvh;
justify-content: center;
left: 0;
overflow: auto;
position: fixed;
top: 0;
transition: opacity 0.3s ease;
width: 100vw;
z-index: 9999;
}
.cc-modal-rounded-sm {
--modalBorderRadius: 0.5rem;
}
.cc-modal-rounded-lg {
--modalBorderRadius: 1rem;
}
.cc-modal-rounded-lg .cc-modal-header,
.cc-modal-rounded-sm .cc-modal-header {
border-radius: var(--modalBorderRadius) var(--modalBorderRadius) 0 0;
}
.cc-modal-rounded-lg .cc-modal-footer,
.cc-modal-rounded-sm .cc-modal-footer {
border-radius: 0 0 var(--modalBorderRadius) var(--modalBorderRadius);
}
.cc-modal-body {
background-color: var(--modalBg, var(--globalBackgroundOpaque));
margin: auto;
max-width: calc(100% - 1.5rem);
position: relative;
}
.cc-modal-body.cc-modal-rounded-lg,
.cc-modal-body.cc-modal-rounded-sm {
border-radius: var(--modalBorderRadius);
}
.cc-modal-body.cc-modal-light-grey {
--modalBg: var(--color-gray-75);
}
.cc-modal-body.cc-modal-light {
--modalBg: #fff;
}
.cc-modal-body.cc-modal-dark {
--modalBg: #262421;
}
.cc-modal-backdrop {
background-color: var(--backdropBg, rgba(0, 0, 0, 0.65));
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.cc-modal-bg-transparent {
--backdropBg: transparent;
}
.cc-modal-enter,
.cc-modal-leave {
opacity: 0;
}
.cc-modal-xs {
width: 35rem;
}
.cc-modal-sm {
width: 40rem;
}
.cc-modal-md {
width: 46rem;
}
.cc-modal-lg {
width: 50rem;
}
.cc-modal-xl {
width: 60rem;
}
.cc-radio-button-component {
align-items: flex-start;
display: inline-flex;
position: relative;
}
.cc-radio-button-input {
appearance: none;
border: solid 0.1rem var(--globalColorThemeLow);
border-radius: 50%;
cursor: pointer;
display: block;
flex-shrink: 0;
height: 1.4rem;
margin: 0.3rem 0 0.2rem 0;
outline: 0;
outline-offset: 0.1rem;
position: relative;
width: 1.4rem;
}
.cc-radio-button-input:hover:not(:disabled) {
border-color: var(--globalColorThemeMid);
}
.cc-radio-button-input:checked {
border-color: var(--globalColorThemeLow);
display: grid;
place-items: center;
}
.cc-radio-button-input:checked:hover:not(:disabled) {
border-color: var(--globalColorThemeMid);
}
.cc-radio-button-input:checked:hover:not(:disabled):after {
background-color: var(--globalColorThemeMid);
}
.cc-radio-button-input:checked:after {
background-color: var(--globalColorThemeLow);
border-radius: 50%;
content: "";
height: 0.8rem;
position: absolute;
width: 0.8rem;
}
.cc-radio-button-input:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.cc-radio-button-input:disabled + .cc-radio-button-label {
cursor: not-allowed;
opacity: 0.6;
}
.cc-radio-button-label {
color: var(--globalColorThemeMid);
cursor: pointer;
font-size: 1.4rem;
line-height: 1.1428;
min-height: 2rem;
padding: 0.2rem 0 0.2rem 0.8rem;
}
.keyboard-navigation-in-use .cc-radio-button-input:focus {
outline: 0.1rem auto -webkit-focus-ring-color;
}
.cc-select-component {
--borderColor: #dbd9d7;
--borderFocus: #bdbcb8;
--bgColor: #fff;
--textColor: #312e2b;
--arrowColor: #a7a6a2;
}
.dark-mode .cc-select-component {
--borderColor: hsla(0, 0%, 100%, 0.1);
--borderFocus: hsla(0, 0%, 100%, 0.3);
--bgColor: hsla(0, 0%, 100%, 0.1);
--textColor: hsla(0, 0%, 100%, 0.72);
--arrowColor: hsla(0, 0%, 100%, 0.5);
--optionBgColor: #fff;
--optionTextColor: #312e2b;
}
.cc-select-component.cc-select-error {
--borderColor: var(--color-border-danger) !important;
--borderFocus: var(--color-border-danger) !important;
}
.cc-select-component {
--arrowPosition: 1rem;
--selectSize: 4rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bgColor);
border: 0.1rem solid var(--borderColor);
border-radius: 0.3rem;
color: var(--textColor);
font-size: 1.4rem;
line-height: 1.2;
padding: 0.4rem calc(var(--arrowPosition) + 2rem) 0.4rem 0.8rem;
position: relative;
width: 100%;
}
.cc-select-component::-ms-expand {
display: none;
}
.cc-select-component:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.cc-select-component[multiple] {
padding: 0 !important;
}
.cc-select-component[multiple] option {
padding: 0.4rem 1rem;
}
.cc-select-component:not([multiple]) {
background-image: linear-gradient(
45deg,
transparent 49.8%,
var(--arrowColor) 0
),
linear-gradient(135deg, var(--arrowColor) 49.8%, transparent 0);
background-position: calc(100% - var(--arrowPosition) - 0.5rem) 50%,
calc(100% - var(--arrowPosition)) 50%;
background-repeat: no-repeat;
background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
height: var(--selectSize);
}
.cc-select-component:not([multiple]) option {
background-color: var(--optionBgColor);
color: var(--optionTextColor);
}
.cc-select-component:not([multiple]) optgroup {
color: var(--optionTextColor);
}
.cc-select-component:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.cc-select-component:focus:not(:disabled),
.cc-select-component:hover:not(:disabled) {
border-color: var(--borderFocus);
color: var(--textColor);
}
.cc-select-component.cc-select-small {
--selectSize: 3.2rem;
font-size: 1.5rem;
}
.cc-select-component.cc-select-large {
--arrowPosition: 1.2rem;
--selectSize: 4.8rem;
font-size: 1.5rem;
padding: 0.8rem calc(var(--arrowPosition) + 2rem) 0.8rem 1rem;
}
.cc-switch-component {
--switchSize: 2.4rem;
--switchPadding: 0.2rem;
flex-shrink: 0;
font-size: 1rem;
height: var(--switchHeight, 2.6rem);
padding: var(--switchPadding);
user-select: none;
width: var(--switchWidth, 4.6rem);
}
.cc-switch-small {
--switchHeight: 1.4rem;
--switchWidth: 2.4rem;
--switchSize: 1.2rem;
--switchPadding: 0.1rem;
}
.cc-switch-checkbox {
clip: rect(0 0 0 0);
height: 0.1rem;
overflow: hidden;
position: absolute;
width: 0.1rem;
}
.cc-switch-checkbox:disabled + .cc-switch-label {
cursor: not-allowed;
opacity: 0.5;
}
.cc-switch-checkbox:focus-visible + label {
box-shadow: 0 0 0 0.2rem rgba(0, 159, 217, 0.5);
}
.cc-switch-checkbox:not(.cc-switch-readonly):checked + .cc-switch-label {
background-color: var(--color-green-400);
}
.cc-switch-checkbox:not(.cc-switch-readonly):checked
+ .cc-switch-label
.cc-switch-button {
margin-left: calc(100% - var(--switchSize) + 0.1rem);
}
.cc-switch-label {
background-color: hsla(0, 0%, 46%, 0.4);
border: 0.1rem solid hsla(0, 0%, 100%, 0.2);
border-radius: 1.1rem;
cursor: pointer;
display: block;
height: 100%;
}
.cc-switch-button {
background-color: #e8e7e6;
border: 0.1rem solid #dad7d5;
border-radius: 50%;
box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1);
height: var(--switchSize);
margin: calc(var(--switchPadding) * -1);
width: var(--switchSize);
}
.cc-switch-button,
.cc-switch-label {
transition: all 0.2s ease;
}
.cc-switch-group {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
.cc-textarea-component {
--borderColor: #dbd9d7;
--borderFocus: #bdbcb8;
--bgColor: #fff;
--textColor: #322e2b;
--secondaryTextColor: #8b8987;
}
.dark-mode .cc-textarea-component {
--borderColor: hsla(0, 0%, 100%, 0.1);
--borderFocus: hsla(0, 0%, 100%, 0.3);
--bgColor: hsla(0, 0%, 100%, 0.1);
--textColor: hsla(0, 0%, 100%, 0.72);
--secondaryTextColor: hsla(0, 0%, 100%, 0.5);
}
.cc-textarea-component.cc-textarea-error {
--borderColor: var(--color-border-danger) !important;
--borderFocus: var(--color-border-danger) !important;
}
.cc-textarea-component {
-moz-appearance: none;
-webkit-appearance: none;
background-color: var(--bgColor);
border: 0.1rem solid var(--borderColor);
border-radius: 0.3rem;
color: var(--textColor);
font-family: var(--globalPrimaryFont);
font-size: var(--textSize, 1.6rem);
line-height: 1.25;
min-height: 3.2rem;
padding: 0.5rem 0.8rem;
resize: vertical;
width: 100%;
}
@media (min-width: 40em) {
.cc-textarea-component {
--textSize: 1.4rem;
}
}
.cc-textarea-component:focus:not(:disabled),
.cc-textarea-component:hover:not(:disabled) {
border-color: var(--borderFocus);
}
.cc-textarea-component:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.cc-textarea-component::placeholder {
color: var(--secondaryTextColor);
}
.cc-textarea-component:invalid {
box-shadow: none;
}
.cc-textarea-component.cc-textarea-autosize {
max-height: 16rem;
resize: none;
}
.cc-textarea-small {
height: 4.8rem;
}
.cc-textarea-large {
height: 10rem;
}
.cc-textarea-x-large {
height: 20rem;
}
a {
color: inherit;
text-decoration: none;
}
a,
button {
cursor: pointer;
}
button {
font-family: inherit;
}
.base-container {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
background: center/cover fixed no-repeat url("./images/bitcoin-image.jpeg");
}
@media (min-width: 60em) {
.base-layout {
padding-left: var(--navWidth);
}
.base-sidebar {
left: 0;
position: fixed;
z-index: 9000;
}
}
ol,
ul {
color: #312e2b;
font-size: 1.4rem;
font-weight: 400;
line-height: 2.1rem;
padding-left: 2rem;
}
ul {
list-style-type: disc;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
margin: 0;
padding: 0;
}
h1 {
font-size: 2.4rem;
}
h2 {
font-size: 1.8rem;
}
h3,
p {
font-size: 1.5rem;
}
p {
font-weight: 400;
line-height: 2.1rem;
margin: 0;
padding: 0;
}
b,
optgroup,
strong {
font-weight: 700;
}
blockquote {
margin: 0;
}
figure {
margin: 0;
}
.figcaption:not(:empty) {
word-wrap: break-word;
color: var(--globalColorThemeMid);
font-size: 1.4rem;
font-style: italic;
line-height: 1.4;
margin: 1rem 0 2rem;
text-align: center;
}
.figcaption:not(:empty):before {
color: var(--globalColorThemeLow);
content: "H";
display: inline-block;
font-family: Chess V3;
font-size: 1.6rem;
font-style: normal;
line-height: 1;
margin-right: 0.8rem;
position: relative;
top: 0;
}
body:not(.keyboard-navigation-in-use) :focus {
outline: 0;
}
img.img-defer-placeholder {
background-color: var(--color-bg-subtle);
max-height: 30rem;
width: 100%;
}
[v-cloak] {
display: none;
}
img.img-defer-placeholder[data-src*="icons/smileys/"] {
width: 1.5rem;
}
img.img-defer-placeholder[data-src*="/emotions/img"] {
width: 1.8rem;
}
.video-defer-placeholder {
background-color: #000;
}
:root.dark-mode {
color-scheme: dark;
}
.dark-mode .chessDiagramDiv,
.dark-mode .dailyPuzzleDiv {
background-color: transparent;
border-color: var(--color-transparent-white-10);
}
.dark-mode .chessDiagramDiv:before,
.dark-mode .dailyPuzzleDiv:before {
background-color: var(--color-transparent-white-10);
background-image: linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.2) 25%,
transparent 0,
transparent 75%,
hsla(0, 0%, 100%, 0.2) 0,
hsla(0, 0%, 100%, 0.2)
),
linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.2) 25%,
transparent 0,
transparent 75%,
hsla(0, 0%, 100%, 0.2) 0,
hsla(0, 0%, 100%, 0.2)
);
background-position: 0 0, 4.5rem 4.5rem;
background-size: 9rem 9rem;
height: 36rem;
width: 36rem;
}
@media (min-width: 25em) {
.chessDiagramDiv,
.dailyPuzzleDiv {
height: 36rem;
width: 36rem;
}
.chessDiagramDiv:not([class*="diagramType_"]):before,
.dailyPuzzleDiv:not([class*="diagramType_"]):before {
background-color: var(--color-gray-75);
background-image: linear-gradient(
45deg,
var(--color-gray-300) 25%,
transparent 25%,
transparent 75%,
var(--color-gray-300) 75%,
var(--color-gray-300)
),
linear-gradient(
45deg,
var(--color-gray-300) 25%,
transparent 25%,
transparent 75%,
var(--color-gray-300) 75%,
var(--color-gray-300)
);
background-position: 0 0, 4.5rem 4.5rem;
background-size: 9rem 9rem;
height: 36rem;
width: 36rem;
}
.dark-mode .chessDiagramDiv:not([class*="diagramType_"]):before,
.dark-mode .dailyPuzzleDiv:not([class*="diagramType_"]):before {
background-color: var(--color-transparent-white-10);
background-image: linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.2) 25%,
transparent 0,
transparent 75%,
hsla(0, 0%, 100%, 0.2) 0,
hsla(0, 0%, 100%, 0.2)
),
linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.2) 25%,
transparent 0,
transparent 75%,
hsla(0, 0%, 100%, 0.2) 0,
hsla(0, 0%, 100%, 0.2)
);
background-position: 0 0, 4.5rem 4.5rem;
background-size: 9rem 9rem;
height: 36rem;
width: 36rem;
}
}
@media (min-width: 38.438em) {
.chessDiagramDiv,
.dailyPuzzleDiv {
margin: 0 0 1.5rem;
width: 100%;
}
}
:root {
--color-green-25: #f6ffe3;
--color-green-50: #f3ffcf;
--color-green-75: #ebffbd;
--color-green-100: #d8fa9d;
--color-green-200: #b2e068;
--color-green-300: #81b64c;
--color-green-400: #5d9948;
--color-green-500: #45753c;
--color-green-600: #305730;
--color-aqua-25: #eafffa;
--color-aqua-50: #ddfff5;
--color-aqua-75: #ccffec;
--color-aqua-100: #adfbd8;
--color-aqua-200: #62f6ca;
--color-aqua-300: #26c2a3;
--color-aqua-400: #109888;
--color-aqua-500: #10777c;
--color-aqua-600: #09505f;
--color-blue-25: #cef5ff;
--color-blue-50: #b2f0ff;
--color-blue-75: #83defc;
--color-blue-100: #4dc3ea;
--color-blue-200: #009fd9;
--color-blue-300: #008cd1;
--color-blue-400: #0069ab;
--color-blue-500: #0b548c;
--color-blue-600: #083a66;
--color-slate-25: #faffff;
--color-slate-50: #f2fcff;
--color-slate-75: #e5f6ff;
--color-slate-100: #d0e6fb;
--color-slate-200: #aed0f0;
--color-slate-300: #749bbf;
--color-slate-400: #486688;
--color-slate-500: #324660;
--color-slate-600: #263242;
--color-purple-25: #f6edff;
--color-purple-50: #e8dbff;
--color-purple-75: #d5c6ff;
--color-purple-100: #c9acff;
--color-purple-200: #9881f2;
--color-purple-300: #7a66f4;
--color-purple-400: #5e53d9;
--color-purple-500: #303d8a;
--color-purple-600: #212e5d;
--color-fuchsia-25: #ffd4d4;
--color-fuchsia-50: #ffb5b9;
--color-fuchsia-75: #ff949d;
--color-fuchsia-100: #ff788a;
--color-fuchsia-200: #fa466a;
--color-fuchsia-300: #ed2456;
--color-fuchsia-400: #c4144f;
--color-fuchsia-500: #940c45;
--color-fuchsia-600: #610734;
--color-red-25: #ffe0ca;
--color-red-50: #ffcbb2;
--color-red-75: #ffb196;
--color-red-100: #ff8a75;
--color-red-200: #ff6352;
--color-red-300: #fa412d;
--color-red-400: #e02828;
--color-red-500: #ad1f24;
--color-red-600: #881822;
--color-orange-25: #fffbda;
--color-orange-50: #fff3c2;
--color-orange-75: #ffe5a8;
--color-orange-100: #ffd591;
--color-orange-200: #ffa459;
--color-orange-300: #fa742c;
--color-orange-400: #dc501d;
--color-orange-500: #a93616;
--color-orange-600: #7a1a0b;
--color-gold-25: #ffffc7;
--color-gold-50: #fff599;
--color-gold-75: #fce26a;
--color-gold-100: #fad541;
--color-gold-200: #f7c631;
--color-gold-300: #e3aa24;
--color-gold-400: #cf8d1b;
--color-gold-500: #b27314;
--color-gold-600: #99580e;
--color-brown-25: #fffef5;
--color-brown-50: #fbf7ec;
--color-brown-75: #fbf3d8;
--color-brown-100: #fbebc1;
--color-brown-200: #f9d983;
--color-brown-300: #e2b664;
--color-brown-400: #ca9350;
--color-brown-500: #9d6c3e;
--color-brown-600: #6a4632;
--color-skin-25: #fffce8;
--color-skin-50: #fff3d4;
--color-skin-75: #fbe7c4;
--color-skin-100: #fadaae;
--color-skin-200: #e3c29c;
--color-skin-300: #d5a47d;
--color-skin-400: #8d694b;
--color-skin-500: #6b4d3a;
--color-skin-600: #543f34;
--color-neutrals-white: #fff;
--color-neutrals-black: #000;
--color-gray-75: #f8f8f8;
--color-gray-100: #f1f1f1;
--color-gray-200: #e7e6e5;
--color-gray-300: #dad8d6;
--color-gray-400: #bebdb9;
--color-gray-500: #8b8987;
--color-gray-600: #666564;
--color-gray-700: #4b4847;
--color-gray-800: #312e2b;
--color-gray-900: #262421;
--color-transparent-white-2: hsla(0, 0%, 100%, 0.02);
--color-transparent-white-5: hsla(0, 0%, 100%, 0.05);
--color-transparent-white-8: hsla(0, 0%, 100%, 0.08);
--color-transparent-white-10: hsla(0, 0%, 100%, 0.1);
--color-transparent-white-14: hsla(0, 0%, 100%, 0.14);
--color-transparent-white-25: hsla(0, 0%, 100%, 0.25);
--color-transparent-white-40: hsla(0, 0%, 100%, 0.4);
--color-transparent-white-50: hsla(0, 0%, 100%, 0.5);
--color-transparent-white-65: hsla(0, 0%, 100%, 0.65);
--color-transparent-white-72: hsla(0, 0%, 100%, 0.72);
--color-transparent-white-85: hsla(0, 0%, 100%, 0.85);
--color-transparent-white-95: hsla(0, 0%, 100%, 0.95);
--color-transparent-black-14: rgba(0, 0, 0, 0.14);
--color-transparent-black-18: rgba(0, 0, 0, 0.18);
--color-transparent-black-20: rgba(0, 0, 0, 0.2);
--color-transparent-black-65: rgba(0, 0, 0, 0.65);
--color-transparent-black-77: rgba(0, 0, 0, 0.77);
--color-streak-high: var(--color-red-300);
--color-streak-medium: var(--color-orange-300);
--color-streak-low: var(--color-orange-200);
--color-streak-lowest: var(--color-gold-100);
--color-classification-brilliant: var(--color-aqua-400);
--color-classification-great: var(--color-slate-400);
--color-classification-best: var(--color-green-400);
--color-classification-excellent: var(--color-green-400);
--color-classification-good: #89960e;
--color-classification-book: var(--color-skin-400);
--color-classification-inaccuracy: var(--color-gold-300);
--color-classification-mistake: #dd7c2c;
--color-classification-miss: #ff7769;
--color-classification-blunder: var(--color-red-400);
}
.dark-mode {
--color-classification-brilliant: var(--color-aqua-300);
--color-classification-great: var(--color-slate-300);
--color-classification-best: var(--color-green-300);
--color-classification-excellent: var(--color-green-300);
--color-classification-good: #77915f;
--color-classification-book: var(--color-skin-300);
--color-classification-inaccuracy: var(--color-gold-200);
--color-classification-mistake: var(--color-orange-200);
--color-classification-miss: #ff7769;
--color-classification-blunder: var(--color-red-300);
}
:root {
--color-icon-bullet: var(--color-gold-400);
--color-icon-blitz: var(--color-gold-200);
--color-icon-rapid: var(--color-green-400);
--color-icon-crazyhouse: var(--color-blue-300);
--color-icon-daily: var(--color-gold-200);
--color-icon-insights: var(--color-gold-200);
--color-icon-live960: var(--color-orange-300);
--color-icon-daily960: var(--color-orange-400);
--color-icon-puzzlerush: var(--color-orange-200);
--color-icon-premium: var(--color-blue-300);
--color-icon-3check: var(--color-aqua-400);
--color-icon-bughouse: var(--color-green-400);
--color-icon-kinghill: var(--color-brown-400);
--color-icon-vscomputer: var(--color-slate-300);
--color-icon-puzzles: var(--color-orange-300);
--color-icon-tournaments: var(--color-gold-300);
--color-icon-lessons: var(--color-blue-300);
--color-icon-votechess: var(--color-green-400);
--color-icon-puzzlebattle: var(--color-green-400);
--color-icon-match: var(--color-gray-500);
--color-icon-livematch: var(--color-gray-500);
}
.dark-mode {
--color-icon-bullet: var(--color-gold-300);
--color-icon-blitz: var(--color-gold-100);
--color-icon-rapid: var(--color-green-300);
--color-icon-crazyhouse: var(--color-blue-300);
--color-icon-daily: var(--color-gold-200);
--color-icon-insights: var(--color-gold-100);
--color-icon-live960: var(--color-orange-300);
--color-icon-daily960: var(--color-orange-400);
--color-icon-puzzlerush: var(--color-orange-200);
--color-icon-premium: var(--color-blue-200);
--color-icon-3check: var(--color-aqua-300);
--color-icon-bughouse: var(--color-green-400);
--color-icon-kinghill: var(--color-brown-500);
--color-icon-vscomputer: var(--color-slate-300);
--color-icon-puzzles: var(--color-orange-300);
--color-icon-tournaments: var(--color-gold-200);
--color-icon-lessons: var(--color-blue-200);
--color-icon-votechess: var(--color-green-300);
--color-icon-puzzlebattle: var(--color-green-300);
--color-icon-match: var(--color-transparent-white-50);
--color-icon-livematch: var(--color-transparent-white-50);
}
:root {
--color-bg-chesstitle: #7c2929;
--color-leagues-wood: var(--color-brown-500);
--color-leagues-stone: var(--color-gray-500);
--color-leagues-bronze: var(--color-gold-500);
--color-leagues-silver: var(--color-slate-400);
--color-leagues-crystal: var(--color-blue-200);
--color-leagues-elite: var(--color-red-400);
--color-leagues-champion: var(--color-gold-400);
--color-leagues-legend: var(--color-gray-700);
}
.dark-mode {
--color-leagues-wood: var(--color-brown-400);
--color-leagues-stone: var(--color-gray-400);
--color-leagues-bronze: var(--color-gold-400);
--color-leagues-silver: var(--color-slate-100);
--color-leagues-crystal: var(--color-blue-75);
--color-leagues-elite: var(--color-red-200);
--color-leagues-champion: var(--color-gold-200);
--color-leagues-legend: var(--color-gray-75);
}
:root {
--color-icon-win: var(--color-green-400);
--color-text-win: var(--color-green-400);
--color-bg-win: var(--color-green-300);
--color-border-win: var(--color-green-300);
--color-icon-draw: var(--color-gray-500);
--color-text-draw: var(--color-gray-600);
--color-bg-draw: var(--color-gray-600);
--color-border-draw: var(--color-gray-300);
--color-icon-loss: var(--color-red-400);
--color-text-loss: var(--color-red-400);
--color-bg-loss: var(--color-red-400);
--color-border-loss: var(--color-red-400);
}
.dark-mode {
--color-icon-win: var(--color-green-300);
--color-text-win: var(--color-green-300);
--color-icon-draw: var(--color-transparent-white-50);
--color-text-draw: var(--color-transparent-white-72);
--color-bg-draw: var(--color-transparent-white-72);
--color-border-draw: var(--color-transparent-white-10);
--color-icon-loss: var(--color-red-300);
--color-text-loss: var(--color-red-300);
--color-border-loss: var(--color-red-300);
}
:root {
--color-icon-success: var(--color-green-400);
--color-text-success: var(--color-green-400);
--color-bg-success: var(--color-green-300);
--color-border-success: var(--color-green-300);
--color-icon-danger: var(--color-red-400);
--color-text-danger: var(--color-red-400);
--color-bg-danger: var(--color-red-400);
--color-border-danger: var(--color-red-400);
}
.dark-mode {
--color-icon-success: var(--color-green-300);
--color-text-success: var(--color-green-300);
--color-icon-danger: var(--color-red-300);
--color-text-danger: var(--color-red-300);
--color-border-danger: var(--color-red-300);
}
:root {
--color-icon-gold: var(--color-gold-200);
--color-bg-gold: var(--color-gold-100);
--color-icon-silver: var(--color-gray-400);
--color-bg-silver: var(--color-gray-200);
--color-icon-bronze: var(--color-skin-300);
--color-bg-bronze: var(--color-skin-200);
}
.dark-mode {
--color-bg-gold: var(--color-gold-200);
--color-bg-silver: var(--color-gray-400);
--color-bg-bronze: var(--color-skin-300);
}
:root {
--color-bg-primary: var(--color-gray-800);
--color-bg-secondary: var(--color-neutrals-white);
--color-bg-tertiary: var(--color-gray-100);
--color-bg-quaternary: var(--color-gray-300);
--color-bg-opaque: var(--color-neutrals-white);
--color-bg-subtle: var(--color-gray-300);
--color-bg-subtler: var(--color-gray-100);
--color-bg-subtlest: var(--color-gray-75);
--color-bg-input: var(--color-neutrals-white);
}
.dark-mode {
--color-bg-secondary: var(--color-transparent-black-20);
--color-bg-tertiary: var(--color-transparent-black-14);
--color-bg-quaternary: var(--color-transparent-black-18);
--color-bg-opaque: var(--color-gray-900);
--color-bg-subtle: var(--color-transparent-white-10);
--color-bg-subtler: var(--color-transparent-white-8);
--color-bg-subtlest: var(--color-transparent-white-2);
--color-bg-input: var(--color-transparent-white-10);
}
:root {
--color-text-boldest: var(--color-gray-800);
--color-text-bolder: var(--color-gray-700);
--color-text-default: var(--color-gray-600);
--color-text-default-hovered: var(--color-gray-700);
--color-text-subtle: var(--color-gray-500);
--color-text-placeholder: var(--color-gray-400);
--color-text-inverse: var(--color-neutrals-white);
--color-text-link: var(--color-blue-400);
--color-text-link-hovered: var(--color-blue-300);
}
.dark-mode {
--color-text-boldest: var(--color-neutrals-white);
--color-text-bolder: var(--color-transparent-white-85);
--color-text-default: var(--color-transparent-white-72);
--color-text-default-hovered: var(--color-transparent-white-85);
--color-text-subtle: var(--color-transparent-white-50);
--color-text-placeholder: var(--color-transparent-white-40);
--color-text-inverse: var(--color-gray-800);
--color-text-link: var(--color-blue-200);
--color-text-link-hovered: var(--color-blue-100);
}
:root {
--color-icon-boldest: var(--color-gray-700);
--color-icon-bolder: var(--color-gray-600);
--color-icon-default: var(--color-gray-500);
--color-icon-default-hovered: var(--color-gray-600);
--color-icon-subtle: var(--color-gray-400);
--color-icon-inverse: var(--color-neutrals-white);
}
.dark-mode {
--color-icon-boldest: var(--color-transparent-white-85);
--color-icon-bolder: var(--color-transparent-white-72);
--color-icon-default: var(--color-transparent-white-50);
--color-icon-default-hovered: var(--color-transparent-white-72);
--color-icon-subtle: var(--color-transparent-white-40);
--color-icon-inverse: var(--color-gray-800);
}
:root {
--color-border-default: var(--color-gray-300);
--color-border-default-hovered: var(--color-gray-400);
--color-border-selected: var(--color-green-300);
}
.dark-mode {
--color-border-default: var(--color-transparent-white-10);
--color-border-default-hovered: var(--color-transparent-white-25);
}
:root {
--radius-s: 0.2rem;
--radius-m: 0.3rem;
--radius-l: 0.5rem;
--radius-xl: 1rem;
--radius-xxl: 2rem;
--space-50: 0.2rem;
--space-75: 0.4rem;
--space-100: 0.8rem;
--space-200: 1.2rem;
--space-300: 1.6rem;
--space-400: 2.4rem;
--space-500: 3.2rem;
--space-600: 4rem;
--space-700: 8rem;
--globalBackground: var(--color-neutrals-white);
--globalBackgroundOpaque: var(--color-neutrals-white);
--globalSecondaryBackground: var(--color-gray-100);
--globalTertiaryBackground: var(--color-gray-300);
--globalBorder: rgba(0, 0, 0, 0.1);
--globalGray: var(--color-gray-300);
--globalGraySoft: var(--color-gray-100);
--globalColorThemeFull: var(--color-gray-800);
--globalColorThemeHigh: var(--color-gray-700);
--globalColorThemeMid: var(--color-gray-600);
--globalColorThemeLow: var(--color-gray-500);
}
.dark-mode {
--globalBackground: var(--color-transparent-black-20);
--globalBackgroundOpaque: var(--color-gray-900);
--globalSecondaryBackground: var(--color-transparent-black-14);
--globalTertiaryBackground: var(--color-transparent-black-18);
--globalBorder: var(--color-transparent-white-10);
--globalGray: var(--color-transparent-white-8);
--globalGraySoft: var(--color-transparent-white-8);
--globalColorThemeFull: #fff;
--globalColorThemeHigh: var(--color-transparent-white-85);
--globalColorThemeMid: var(--color-transparent-white-72);
--globalColorThemeLow: var(--color-transparent-white-50);
}
:root {
--globalAccentBackground: #fff;
--globalSecondaryAccentBackground: var(--color-gray-75);
--globalSiteBackground: var(--color-gray-75);
--subtleButtonBackground: var(--color-gray-200);
--globalColorThemeLower: var(--color-gray-400);
--globalColorThemeBlueToWhite: var(--color-blue-400);
--globalColorThemeBlueToMid: var(--color-blue-400);
--globalColorThemeBlueToMidHover: var(--color-blue-300);
--globalColorThemeBlueToHigh: var(--color-blue-400);
--globalColorThemeBlueToHighHover: var(--color-blue-300);
--globalColorThemeFullToMid: var(--color-gray-800);
--globalColorThemeHighToMid: var(--color-gray-700);
--globalColorNeutral50: var(--color-gray-75);
--globalColorNeutral100: var(--color-gray-100);
--globalColorNeutral200: var(--color-gray-300);
--globalPrimaryFont: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
Helvetica, Arial, sans-serif;
--globalSecondaryFont: "Montserrat", sans-serif;
--globalOverlayBackground: var(--color-gray-100);
}
.dark-mode {
--globalAccentBackground: var(--color-transparent-white-14);
--globalSecondaryAccentBackground: var(--color-transparent-white-5);
--globalSiteBackground: var(--color-gray-800);
--subtleButtonBackground: hsla(0, 0%, 100%, 0.16);
--globalColorThemeLower: hsla(0, 0%, 100%, 0.2);
--globalColorThemeBlueToWhite: #fff;
--globalColorThemeBlueToMid: var(--color-transparent-white-72);
--globalColorThemeBlueToMidHover: var(--color-transparent-white-85);
--globalColorThemeBlueToHigh: var(--color-transparent-white-85);
--globalColorThemeBlueToHighHover: #fff;
--globalColorThemeFullToMid: var(--color-transparent-white-72);
--globalColorThemeHighToMid: var(--color-transparent-white-72);
--globalColorNeutral50: rgba(0, 0, 0, 0.1);
--globalColorNeutral100: var(--color-transparent-black-20);
--globalColorNeutral200: rgba(0, 0, 0, 0.4);
--globalOverlayBackground: var(--color-gray-900);
}
body.theme-background {
background-attachment: fixed;
background-color: var(--theme-background-color, #312e2b);
background-image: var(--theme-background-image);
background-position: 50%;
background-size: cover;
transition: background-image 0.3s linear, background-color 0.3s linear;
}
@supports (-webkit-touch-callout: none) {
body.theme-background:before {
background-image: var(--theme-background-image);
background-position: 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
content: "";
height: 100vh;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
}
body.theme-background #sb .nav-panel-theme-bg {
background-image: var(--theme-background-image);
}
body.theme-background #sb .nav-panel-shade {
background: rgba(0, 0, 0, 0.4);
}
.placeholder-ad-upgrade {
background-color: var(--color-blue-300);
border-radius: 0 0 0.2rem 0.2rem;
text-align: center;
width: 100%;
}
.placeholder-ad-upgrade:hover {
background-color: var(--color-blue-200);
}
.placeholder-ad-upgrade:hover a {
text-decoration: underline;
}
.placeholder-ad-link {
color: #fff;
display: block;
font-size: 1.1rem;
font-weight: 700;
height: 3rem;
padding: 0.7rem;
}
.form-help-block {
color: var(--globalColorThemeMid);
display: block;
font-size: 1.2rem;
margin-top: 0.5rem;
}
input:not([type="radio"]):not([type="checkbox"]),
textarea {
-webkit-appearance: none;
-moz-appearance: none;
}
textarea {
resize: vertical;
}
input[type="number"] {
-moz-appearance: textfield !important;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 736px) {
input,
input:focus,
select,
select:focus,
textarea,
textarea:focus {
font-size: 1.6rem !important;
}
}
.form-error-component {
color: var(--color-text-danger);
font-size: 1.2rem;
font-weight: 600;
}
.form-error-wrapper {
flex-direction: column;
}
.form-error-wrapper input:not([type="file"]),
.form-error-wrapper select,
.form-error-wrapper textarea {
border: 0.1rem solid var(--color-border-danger) !important;
}
.form-error-text {
display: block;
font-size: 1.2rem;
margin-top: 0.5rem;
}
.form-error-label,
.form-error-text {
color: var(--color-text-danger);
}
.form-label-label {
display: block;
line-height: 1.1428;
margin-bottom: 0.5rem;
}
@media (min-width: 48em) {
.form-label-label {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
min-height: 3.2rem;
}
}
.user-tagline-component {
align-items: center;
display: flex;
gap: 0.5rem;
max-width: 100%;
position: relative;
}
.user-tagline-component a.user-tagline-username {
cursor: pointer;
}
.user-tagline-component a.user-tagline-not-clickable {
cursor: text;
}
.user-tagline-username {
max-width: 30rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-tagline-rating {
color: var(--globalColorThemeMid);
}
.user-tagline-rating.user-tagline-white {
color: var(--color-transparent-white-72);
}
.toggle-content-wrapper {
flex: 1 0 100%;
margin: 1.2rem -1.2rem -1.2rem -1.2rem;
}
.toggle-content-button {
align-items: center;
background-color: var(--color-bg-tertiary);
border: 0;
color: var(--globalColorThemeMid);
display: flex;
font-size: 1.4rem;
font-weight: 600;
justify-content: center;
padding: 1rem;
width: 100%;
}
.toggle-content-button:hover {
color: var(--globalColorThemeHigh);
}
.toggle-content-icon {
font-size: 1.2rem;
margin-left: 0.5rem;
}
.toggle-content-icon-up {
transform: rotate(180deg);
transform-origin: 50% 56%;
}
.game-preview-placeholder {
background-image: url(/bundles/web/images/game-preview-loading.8677fb94.png);
background-size: contain;
}
.v5-section,
.v5-section-shadow,
.v5-section-shadow-hover {
background-color: var(--globalBackground);
border-radius: 0.5rem;
color: var(--globalColorThemeFullToMid);
}
.v5-section + .v5-section,
.v5-section + .v5-section-clear,
.v5-section-clear + .v5-section,
.v5-section-clear + .v5-section-clear {
margin-top: 2.4rem;
}
.v5-section-shadow,
.v5-section-shadow-hover {
--linkBoxShadow: 0 0.5rem 0 0 #c7c6c5, 0 0 0 0.1rem rgba(49, 46, 43, 0.06);
--linkHoverBackground: #f0f0f0;
box-shadow: var(--linkBoxShadow);
}
.dark-mode .v5-section-shadow,
.dark-mode .v5-section-shadow-hover {
--linkBoxShadow: 0 0.5rem 0 0 rgba(0, 0, 0, 0.4);
--linkHoverBackground: var(--color-transparent-white-5);
}
.v5-section-shadow-hover:hover {
background-color: var(--linkHoverBackground);
transition: background-color 0.1s ease-in-out;
}
.v5-section-content,
.v5-section-content-slim,
.v5-section-content-wide {
padding: 0.8rem;
}
@media (min-width: 20.625em) {
.v5-section-content,
.v5-section-content-slim,
.v5-section-content-wide {
padding: 1.2rem;
}
}
@media (min-width: 48em) {
.v5-section-content {
padding: 2.4rem;
}
.v5-section-content-wide {
padding: 3.2rem;
}
}
.v5-header,
.v5-header-action,
.v5-header-link {
--headerPadding: 0.8rem;
align-items: center;
display: flex;
font-size: 1.7rem;
height: 4.8rem;
padding: 0 var(--headerPadding);
position: relative;
width: 100%;
}
.v5-header-link:hover .v5-header-chevron {
color: var(--globalColorThemeMid);
}
.v5-header-link:hover .v5-header-name {
color: var(--globalColorThemeFull);
}
.v5-header-action .v5-header-name {
flex: 1;
}
.v5-header-action .v5-header-name:hover {
color: var(--globalColorThemeFull);
}
.v5-header-action-button {
background-color: transparent;
border: none;
cursor: pointer;
margin: 0 0 0 auto;
padding: 0;
}
.v5-header-action-icon {
color: var(--globalColorThemeLow);
font-size: 2rem;
}
.v5-header-action-icon:hover {
color: var(--globalColorThemeMid);
}
.v5-header-name {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--globalColorThemeHigh);
display: -webkit-box;
font-weight: 600;
line-height: 1.1;
overflow: hidden;
padding: 0.3rem 0;
text-overflow: ellipsis;
}
.v5-header-count {
color: var(--globalColorThemeLow);
font-weight: 400;
padding-left: 0.2rem;
}
.v5-header-border:after {
border-bottom: 0.1rem solid var(--color-border-default);
bottom: 0;
content: "";
left: var(--headerPadding);
position: absolute;
right: var(--headerPadding);
}
.v5-header-chevron {
color: var(--globalColorThemeLow);
flex-shrink: 0;
font-size: 2rem;
margin-left: auto;
}
.v5-header-has-avatar {
padding-left: 0;
}
.v5-header-has-avatar.v5-header-border:after {
left: 6.6rem;
}
.v5-header-has-avatar .v5-header-name {
line-height: 1.2;
margin-left: 1.6rem;
}
.v5-header-img {
border-radius: 0.5rem 0 0 0;
display: block;
}
@media (min-width: 20.625em) {
.v5-header,
.v5-header-action,
.v5-header-link {
--headerPadding: 1.2rem;
}
}
@media (min-width: 48em) {
.v5-header-link.v5-wide,
.v5-header.v5-wide,
.v5-wide.v5-header-action {
--headerPadding: 2.4rem;
}
.v5-header-link.v5-x-wide,
.v5-header.v5-x-wide,
.v5-x-wide.v5-header-action {
--headerPadding: 3.2rem;
}
}
.dark-mode .v5-tabs-list,
.v5-tabs-list-dark {
--borderColor: var(--color-transparent-white-10);
--tabTitleColor: var(--color-transparent-white-40);
--tabHoverTitleColor: var(--color-transparent-white-65);
--tabSelectedBorderColor: hsla(0, 0%, 100%, 0.8);
--tabSelectedTitleColor: hsla(0, 0%, 100%, 0.8);
}
.v5-tabs-list,
.v5-tabs-list-light {
--borderColor: var(--color-gray-200);
--tabTitleColor: var(--color-gray-500);
--tabHoverTitleColor: var(--color-gray-600);
--tabSelectedBorderColor: var(--color-gray-700);
--tabSelectedTitleColor: var(--color-gray-800);
}
.dark-mode .v5-tabs-list,
.v5-tabs-list,
.v5-tabs-list-dark,
.v5-tabs-list-light {
border-bottom: 1px solid var(--borderColor);
display: flex;
list-style: none;
margin: 0 0 2.5rem;
padding: 0;
width: 100%;
}
.v5-tabs-item {
width: 50%;
}
.v5-tabs-button {
align-items: center;
background-color: transparent;
border: 0;
border-bottom: 0.2rem solid transparent;
color: var(--tabTitleColor);
display: flex;
font-size: 1.4rem;
font-weight: 500;
height: 5rem;
justify-content: center;
margin: 0;
padding: 0.3rem;
text-align: center;
width: 100%;
word-break: break-word;
}
.v5-tabs-button:hover:not([aria-selected="true"]) {
color: var(--tabHoverTitleColor);
}
.v5-tabs-button[aria-selected="true"] {
border-bottom-color: var(--tabSelectedBorderColor);
color: var(--tabSelectedTitleColor);
}
.v5-form-control + .v5-form-control {
margin-top: 1.6rem;
}
.v5-form-label {
display: block;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.v5-list-item:not(:first-child) {
position: relative;
}
.v5-list-item:not(:first-child):before {
border-top: 0.1rem solid var(--color-border-default);
content: "";
left: 4.8rem;
position: absolute;
right: 1.6rem;
top: 0;
}
.v5-list-item-action {
align-items: center;
background-color: transparent;
border: none;
color: var(--globalColorThemeMid);
display: flex;
margin: 0;
min-height: 4.8rem;
padding: 0;
width: 100%;
}
a.v5-list-item-action:hover:not([disabled]),
button.v5-list-item-action:hover:not([disabled]) {
color: var(--globalColorThemeHigh);
}
a.v5-list-item-action:hover:not([disabled]) .v5-list-item-main-icon,
a.v5-list-item-action:hover:not([disabled]) .v5-list-item-secondary-icon,
button.v5-list-item-action:hover:not([disabled]) .v5-list-item-main-icon,
button.v5-list-item-action:hover:not([disabled]) .v5-list-item-secondary-icon {
color: var(--globalColorThemeMid);
}
button.v5-list-item-action[disabled] {
cursor: not-allowed;
opacity: 0.7;
}
.v5-list-item-main-icon {
color: var(--globalColorThemeLow);
flex-shrink: 0;
font-size: 2.4rem;
text-align: center;
width: 4.8rem;
}
.v5-list-item-secondary-icon {
color: var(--globalColorThemeLow);
flex-shrink: 0;
font-size: 1.6rem;
margin-left: 1rem;
margin-right: 1.3rem;
transition: transform 0.1s ease-in;
}
.v5-list-item-label {
flex-basis: 100%;
font-size: 1.4rem;
font-weight: 500;
text-align: left;
}
.v5-list-item-switcher {
margin-left: 1rem;
margin-right: 1.6rem;
}
.v5-list-item-opened .v5-list-item-secondary-icon {
transform: rotate(-180deg);
transform-origin: center;
}
.v5-list-item-tiny + .v5-list-item-tiny {
margin-top: 0.4rem;
}
.v5-list-item-tiny-action {
align-items: flex-start;
background-color: transparent;
border: 0;
color: var(--globalColorThemeMid);
display: inline-flex;
font-size: 1.4rem;
line-height: 1.3;
padding: 0.2rem 0.3rem 0.2rem 0;
}
.v5-list-item-tiny-action:hover {
color: var(--globalColorThemeHigh);
}
.v5-list-item-tiny-icon {
color: var(--globalColorThemeLow);
flex-shrink: 0;
font-size: 2rem;
margin-right: 0.7rem;
}
.v5-title {
color: #fff;
font-family: var(--globalSecondaryFont);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
line-height: 1;
padding: 1rem 0.8rem 0;
position: relative;
}
.v5-title-has-icon {
align-items: center;
display: inline-flex;
margin-top: 1rem;
padding-left: clamp(3.6rem, 6vw, 5.6rem);
position: relative;
text-shadow: 0.2rem 0.1rem rgba(48, 45, 43, 0.3);
}
.v5-title-has-icon:before {
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
content: "";
height: clamp(2.4rem, 4vw, 4rem);
left: 0;
position: absolute;
top: 50%;
transform: translateY(-55%);
width: clamp(2.4rem, 4vw, 4rem);
}
.v5-title-has-icon.analysis:before {
background-image: url(/bundles/web/images/color-icons/analysis.43a8d6cd.svg);
}
.v5-title-has-icon.archive:before {
background-image: url(/bundles/web/images/color-icons/archive.a6dd2002.svg);
}
.v5-title-has-icon.articles:before {
background-image: url(/bundles/web/images/color-icons/articles.bb1f1e2e.svg);
}
.v5-title-has-icon.blogs:before {
background-image: url(/bundles/web/images/color-icons/blogs.0f3f8af1.svg);
}
.v5-title-has-icon.board:before {
background-image: url(/bundles/web/images/color-icons/board.1126c4b3.svg);
}
.v5-title-has-icon.chessopedia:before {
background-image: url(/bundles/web/images/color-icons/chessopedia.a8b5a9fe.svg);
}
.v5-title-has-icon.chesstv:before {
background-image: url(/bundles/web/images/color-icons/chesstv.789190ae.svg);
}
.v5-title-has-icon.clock:before {
background-image: url(/bundles/web/images/color-icons/clock.7ad2706a.svg);
}
.v5-title-has-icon.clubs:before {
background-image: url(/bundles/web/images/color-icons/clubs.0f968e66.svg);
}
.v5-title-has-icon.coaches:before {
background-image: url(/bundles/web/images/color-icons/coaches.e4e9d916.svg);
}
.v5-title-has-icon.cup:before {
background-image: url(/bundles/web/images/color-icons/cup.65a7b5fe.svg);
}
.v5-title-has-icon.daily:before {
background-image: url(/bundles/web/images/color-icons/daily.aeafa3cc.svg);
}
.v5-title-has-icon.dots:before {
background-image: url(/bundles/web/images/color-icons/dots.2b49d987.svg);
}
.v5-title-has-icon.forums:before {
background-image: url(/bundles/web/images/color-icons/forums.6dae5766.svg);
}
.v5-title-has-icon.friends:before {
background-image: url(/bundles/web/images/color-icons/friends.d2e3c382.svg);
}
.v5-title-has-icon.idea:before {
background-image: url(/bundles/web/images/color-icons/idea.5edc0aef.svg);
}
.v5-title-has-icon.leaderboard:before {
background-image: url(/bundles/web/images/color-icons/leaderboard.98db1015.svg);
}
.v5-title-has-icon.lessons:before {
background-image: url(/bundles/web/images/color-icons/lessons.2c5cbe30.svg);
}
.v5-title-has-icon.library:before {
background-image: url(/bundles/web/images/color-icons/library.05149eb4.svg);
}
.v5-title-has-icon.masters:before {
background-image: url(/bundles/web/images/color-icons/masters.a99cfdf3.svg);
}
.v5-title-has-icon.matches:before {
background-image: url(/bundles/web/images/color-icons/matches.6d67d37d.svg);
}
.v5-title-has-icon.members:before {
background-image: url(/bundles/web/images/color-icons/members.d5f10490.svg);
}
.v5-title-has-icon.more:before {
background-image: url(/bundles/web/images/color-icons/more.c64b0086.svg);
}
.v5-title-has-icon.news:before {
background-image: url(/bundles/web/images/color-icons/news.6e020a3f.svg);
}
.v5-title-has-icon.openings:before {
background-image: url(/bundles/web/images/color-icons/openings.74e468de.svg);
}
.v5-title-has-icon.play:before {
background-image: url(/bundles/web/images/color-icons/play.febc0509.svg);
}
.v5-title-has-icon.players-league:before {
background-image: url(/bundles/web/images/color-icons/players-league.6a87b83c.svg);
}
.v5-title-has-icon.puzzles:before {
background-image: url(/bundles/web/images/color-icons/puzzles.a9d51e52.svg);
}
.v5-title-has-icon.ratings:before {
background-image: url(/bundles/web/images/color-icons/ratings.4f781c32.svg);
}
.v5-title-has-icon.secure:before {
background-image: url(/bundles/web/images/color-icons/secure.bdfa40e3.svg);
}
.v5-title-has-icon.settings:before {
background-image: url(/bundles/web/images/color-icons/settings.b0c180bd.svg);
}
.v5-title-has-icon.streamers:before {
background-image: url(/bundles/web/images/color-icons/streamers.828250de.svg);
}
.v5-title-has-icon.today:before {
background-image: url(/bundles/web/images/color-icons/today.3140a132.svg);
}
.v5-title-has-icon.tournaments:before {
background-image: url(/bundles/web/images/color-icons/tournaments.d5eac419.svg);
}
.v5-title-has-icon.trophies:before {
background-image: url(/bundles/web/images/color-icons/trophies.063fb75d.svg);
}
.v5-title-has-icon.videos:before {
background-image: url(/bundles/web/images/color-icons/videos.9493a5cd.svg);
}
.v5-title-has-icon.vote:before {
background-image: url(/bundles/web/images/color-icons/vote.a3f7fcdb.svg);
}
.v5-title-has-icon.watch:before {
background-image: url(/bundles/web/images/color-icons/watch.d42fed26.svg);
}
@media (min-width: 60em) {
.v5-title {
padding: 0;
}
}
.v5-link {
color: var(--color-text-link);
}
.v5-link:hover {
color: var(--color-text-link-hovered);
}
.v5-pb0 {
padding-bottom: 0 !important;
}
.v5-pt0 {
padding-top: 0 !important;
}
.v5-pl0 {
padding-left: 0 !important;
}
.v5-pr0 {
padding-right: 0 !important;
}
.v5-overflow-hidden {
overflow: hidden;
}
.v5-space-top-xs {
margin-top: 1.2rem;
}
.v5-space-top-sm {
margin-top: 1.6rem;
}
.v5-space-top {
margin-top: 2.4rem;
}
.v5-space-bottom {
margin-bottom: 2.4rem;
}
.v5-border-top {
border-top: 0.1rem solid var(--color-border-default);
}
.v5-border-bottom {
border-bottom: 0.1rem solid var(--color-border-default);
}